jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev'

This commit is contained in:
Jeff Emmett 2026-03-04 11:50:55 -08:00
parent ce52829a27 e7687dfe74
commit 202fffb00b
2 changed files with 265 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

345
website/canvas.html
View File

@ -28,6 +28,7 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-tap-highlight-color: transparent;
} }
#toolbar { #toolbar {
@ -38,7 +39,7 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: 4px; gap: 4px;
padding: 8px 6px; padding: 6px 4px;
background: var(--rs-toolbar-bg); background: var(--rs-toolbar-bg);
border-radius: 12px; border-radius: 12px;
box-shadow: var(--rs-shadow-md); box-shadow: var(--rs-shadow-md);
@ -223,6 +224,46 @@
color: white; color: white;
} }
/* Icon-only toolbar: show only emoji, clip text */
.toolbar-group-toggle {
width: 42px;
overflow: hidden;
text-overflow: clip;
text-align: center;
padding-left: 0;
padding-right: 0;
position: relative;
}
/* Tooltip on hover */
.toolbar-group-toggle[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
padding: 4px 10px;
border-radius: 6px;
background: var(--rs-toolbar-panel-bg);
color: var(--rs-toolbar-btn-text);
font-size: 12px;
white-space: nowrap;
box-shadow: var(--rs-shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 1002;
}
.toolbar-group-toggle[data-tip]:hover::after {
opacity: 1;
}
/* Hide tooltip when group is open (dropdown is showing) */
.toolbar-group.open > .toolbar-group-toggle[data-tip]::after {
display: none;
}
/* Collapse/expand toggle — small pill at bottom of toolbar */ /* Collapse/expand toggle — small pill at bottom of toolbar */
#toolbar-collapse { #toolbar-collapse {
padding: 4px 0 !important; padding: 4px 0 !important;
@ -482,6 +523,87 @@
50% { opacity: 0.5; } 50% { opacity: 0.5; }
} }
/* ── Corner tools (zoom + feed) — bottom-left ── */
#canvas-corner-tools {
position: fixed;
bottom: 16px;
left: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px;
background: var(--rs-toolbar-bg);
border-radius: 12px;
box-shadow: var(--rs-shadow-md);
z-index: 1000;
}
.corner-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--rs-toolbar-btn-text);
cursor: pointer;
transition: background 0.15s, color 0.15s;
touch-action: manipulation;
}
.corner-btn:hover {
background: var(--rs-toolbar-btn-hover);
}
.corner-btn.active {
background: var(--rs-accent);
color: white;
}
.corner-btn svg {
pointer-events: none;
}
.corner-sep {
width: 24px;
height: 1px;
background: var(--rs-toolbar-sep);
margin: 2px 0;
flex-shrink: 0;
}
/* ── Header history button ── */
.canvas-header-history {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--rs-text-secondary);
cursor: pointer;
transition: background 0.15s, color 0.15s;
touch-action: manipulation;
}
.canvas-header-history:hover {
background: var(--rs-bg-hover, rgba(255,255,255,0.1));
color: var(--rs-text-primary);
}
.canvas-header-history.active {
background: var(--rs-accent);
color: white;
}
.canvas-header-history svg {
pointer-events: none;
}
/* Memory layer panel */ /* Memory layer panel */
#memory-panel { #memory-panel {
position: fixed; position: fixed;
@ -492,7 +614,7 @@
background: var(--rs-bg-surface); background: var(--rs-bg-surface);
border-radius: 12px; border-radius: 12px;
box-shadow: var(--rs-shadow-lg); box-shadow: var(--rs-shadow-lg);
z-index: 1001; z-index: 10000; /* above header (9999) */
display: none; display: none;
overflow: hidden; overflow: hidden;
} }
@ -1367,26 +1489,9 @@
touch-action: manipulation; touch-action: manipulation;
} }
/* Always-visible zoom strip */ /* Hide old mobile zoom — replaced by #canvas-corner-tools */
#mobile-zoom { #mobile-zoom {
display: flex; display: none;
position: fixed;
bottom: 24px;
left: 16px;
gap: 4px;
z-index: 1002;
}
#mobile-zoom button {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-size: 16px;
cursor: pointer;
touch-action: manipulation;
} }
/* Hide desktop toolbar, show as column overlay when toggled */ /* Hide desktop toolbar, show as column overlay when toggled */
@ -1420,6 +1525,12 @@
padding: 12px 14px; padding: 12px 14px;
font-size: 14px; font-size: 14px;
min-height: 44px; min-height: 44px;
overflow: visible;
}
/* Hide tooltips on mobile — full text shown */
#toolbar .toolbar-group-toggle[data-tip]::after {
display: none;
} }
#toolbar .toolbar-dropdown { #toolbar .toolbar-dropdown {
@ -1486,6 +1597,25 @@
#bottom-toolbar .tool-sep { #bottom-toolbar .tool-sep {
margin: 0 2px; margin: 0 2px;
} }
/* Corner tools: horizontal on mobile, 44px touch targets */
#canvas-corner-tools {
bottom: 8px;
left: 8px;
flex-direction: row;
padding: 4px 6px;
}
#canvas-corner-tools .corner-btn {
width: 44px;
height: 44px;
}
#canvas-corner-tools .corner-sep {
width: 1px;
height: 24px;
margin: 0 2px;
}
} }
/* ── Feed sort bar ── */ /* ── Feed sort bar ── */
@ -1523,34 +1653,6 @@
color: #e2e8f0; color: #e2e8f0;
} }
/* ── Feed toggle button ── */
#feed-toggle {
padding: 7px 10px;
border: none;
border-radius: 8px;
background: #f1f5f9;
cursor: pointer;
font-size: 13px;
transition: background 0.2s;
white-space: nowrap;
text-align: left;
touch-action: manipulation;
}
#feed-toggle:hover { background: #e2e8f0; }
#feed-toggle.active {
background: #14b8a6;
color: white;
}
body[data-theme="dark"] #feed-toggle {
background: #334155;
color: #e2e8f0;
}
body[data-theme="dark"] #feed-toggle:hover { background: #475569; }
body[data-theme="dark"] #feed-toggle.active {
background: #14b8a6;
color: white;
}
@media (max-width: 768px) { @media (max-width: 768px) {
#feed-sort-bar { #feed-sort-bar {
top: 64px; top: 64px;
@ -1720,7 +1822,7 @@
<div id="toolbar"> <div id="toolbar">
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">📝 Note</button> <button class="toolbar-group-toggle" data-tip="Note">📝 Note</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-markdown" title="New Note">📝 Note</button> <button id="new-markdown" title="New Note">📝 Note</button>
<button id="new-slide" title="New Slide">🎞️ Slide</button> <button id="new-slide" title="New Slide">🎞️ Slide</button>
@ -1729,7 +1831,7 @@
</div> </div>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">🔮 Creative</button> <button class="toolbar-group-toggle" data-tip="Creative">🔮 Creative</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-image-gen" title="New AI Image">🎨 AI Image</button> <button id="new-image-gen" title="New AI Image">🎨 AI Image</button>
<button id="new-video-gen" title="New AI Video">🎬 AI Video</button> <button id="new-video-gen" title="New AI Video">🎬 AI Video</button>
@ -1745,7 +1847,7 @@
</div> </div>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">🎨 Media</button> <button class="toolbar-group-toggle" data-tip="Media">🎨 Media</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-transcription" title="New Transcription">🎤 Transcribe</button> <button id="new-transcription" title="New Transcription">🎤 Transcribe</button>
<button id="new-video-chat" title="New Video Call">📹 Video Call</button> <button id="new-video-chat" title="New Video Call">📹 Video Call</button>
@ -1756,7 +1858,7 @@
</div> </div>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">🔗 Embed</button> <button class="toolbar-group-toggle" data-tip="Embed">🔗 Embed</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-embed" title="New Embed">🔗 Web Embed</button> <button id="new-embed" title="New Embed">🔗 Web Embed</button>
<button id="new-google-item" title="New Google Item">📎 Google</button> <button id="new-google-item" title="New Google Item">📎 Google</button>
@ -1776,7 +1878,7 @@
</div> </div>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">🤖 AI</button> <button class="toolbar-group-toggle" data-tip="AI">🤖 AI</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-prompt" title="New AI Chat">🤖 AI Chat</button> <button id="new-prompt" title="New AI Chat">🤖 AI Chat</button>
<button id="new-workflow" title="New Workflow">⚙️ Workflow</button> <button id="new-workflow" title="New Workflow">⚙️ Workflow</button>
@ -1784,7 +1886,7 @@
</div> </div>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">✈️ Travel</button> <button class="toolbar-group-toggle" data-tip="Travel">✈️ Travel</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-itinerary" title="New Itinerary">🗓️ Itinerary</button> <button id="new-itinerary" title="New Itinerary">🗓️ Itinerary</button>
<button id="new-destination" title="New Destination">📍 Destination</button> <button id="new-destination" title="New Destination">📍 Destination</button>
@ -1795,7 +1897,7 @@
</div> </div>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">📊 Decide</button> <button class="toolbar-group-toggle" data-tip="Decide">📊 Decide</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
<button id="new-choice-vote" title="New Poll">☑ Poll</button> <button id="new-choice-vote" title="New Poll">☑ Poll</button>
<button id="new-choice-rank" title="New Ranking">📊 Ranking</button> <button id="new-choice-rank" title="New Ranking">📊 Ranking</button>
@ -1809,23 +1911,6 @@
</div> </div>
</div> </div>
<span class="toolbar-sep"></span>
<button id="toggle-memory" title="Recent Changes">💭 Recent Changes</button>
<button id="toggle-hide-forgotten" title="Hide forgotten items">👁 Hide Faded</button>
<button id="feed-toggle" title="Toggle feed view">📋 Feed View</button>
<span class="toolbar-sep"></span>
<div class="toolbar-group">
<button class="toolbar-group-toggle">🔍 Zoom</button>
<div class="toolbar-dropdown">
<button id="zoom-in" title="Zoom In">+ Zoom In</button>
<button id="zoom-out" title="Zoom Out">− Zoom Out</button>
<button id="reset-view" title="Reset View">⟳ Reset View</button>
</div>
</div>
<button id="toolbar-collapse" title="Minimize toolbar">···</button> <button id="toolbar-collapse" title="Minimize toolbar">···</button>
</div> </div>
@ -1873,6 +1958,26 @@
</div> </div>
</div> </div>
<!-- Corner tools: zoom + feed (bottom-left) -->
<div id="canvas-corner-tools">
<button id="zoom-in" title="Zoom In" class="corner-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
</button>
<button id="zoom-out" title="Zoom Out" class="corner-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
</button>
<button id="reset-view" title="Reset View" class="corner-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
</button>
<span class="corner-sep"></span>
<button id="feed-toggle" title="Feed View" class="corner-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
</button>
</div>
<!-- Hidden button for JS toggle reference (injected into identity dropdown) -->
<button id="toggle-hide-forgotten" style="display:none" title="Hide forgotten items"></button>
<div id="memory-panel"> <div id="memory-panel">
<div id="memory-panel-header"> <div id="memory-panel-header">
<h3>💭 Recent Changes</h3> <h3>💭 Recent Changes</h3>
@ -3933,11 +4038,7 @@
title: btn.title || btn.textContent.trim(), title: btn.title || btn.textContent.trim(),
}; };
}); });
// Add direct sidebar buttons too // Note: toggle-memory, toggle-hide-forgotten, feed-toggle moved out of toolbar
["toggle-memory", "toggle-hide-forgotten", "feed-toggle"].forEach(id => {
const btn = document.getElementById(id);
if (btn) sidebarToolRegistry[id] = { id, label: btn.textContent.trim(), title: btn.title || btn.textContent.trim() };
});
function trackRecentTool(toolId) { function trackRecentTool(toolId) {
if (!toolId || !sidebarToolRegistry[toolId]) return; if (!toolId || !sidebarToolRegistry[toolId]) return;
@ -4375,6 +4476,20 @@
} }
}); });
// ── Inject history button into header ──
{
const headerRight = document.querySelector('.rstack-header__right');
if (headerRight) {
const historyBtn = document.createElement('button');
historyBtn.id = 'toggle-memory';
historyBtn.className = 'canvas-header-history';
historyBtn.title = 'Recent Changes';
historyBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`;
const identity = headerRight.querySelector('rstack-identity');
headerRight.insertBefore(historyBtn, identity);
}
}
// Memory panel — browse and remember forgotten shapes // Memory panel — browse and remember forgotten shapes
const memoryPanel = document.getElementById("memory-panel"); const memoryPanel = document.getElementById("memory-panel");
const memoryList = document.getElementById("memory-list"); const memoryList = document.getElementById("memory-list");
@ -4503,17 +4618,73 @@
if (isOpen) renderMemoryPanel(); if (isOpen) renderMemoryPanel();
}); });
// Hide Faded toggle — hides all forgotten shapes from the canvas // Hide Forgotten toggle — hides all forgotten shapes from the canvas
// Injected into rstack-identity dropdown under theme toggle
const hideForgottenBtn = document.getElementById("toggle-hide-forgotten"); const hideForgottenBtn = document.getElementById("toggle-hide-forgotten");
if (localStorage.getItem("rspace_hide_forgotten") === "1") { const isHiddenInit = localStorage.getItem("rspace_hide_forgotten") === "1";
canvasContent.classList.add("hide-forgotten"); if (isHiddenInit) canvasContent.classList.add("hide-forgotten");
hideForgottenBtn.classList.add("active");
} function toggleHideForgotten() {
hideForgottenBtn.addEventListener("click", () => {
const hidden = canvasContent.classList.toggle("hide-forgotten"); const hidden = canvasContent.classList.toggle("hide-forgotten");
hideForgottenBtn.classList.toggle("active", hidden);
localStorage.setItem("rspace_hide_forgotten", hidden ? "1" : "0"); localStorage.setItem("rspace_hide_forgotten", hidden ? "1" : "0");
}); // Sync checkbox if it exists in dropdown
const identityEl = document.querySelector('rstack-identity');
if (identityEl?.shadowRoot) {
const cb = identityEl.shadowRoot.getElementById('hide-forgotten-toggle');
if (cb) cb.checked = hidden;
}
}
// Inject "Hide Forgotten" into identity dropdown after theme row
{
const identityEl = document.querySelector('rstack-identity');
function injectHideForgotten() {
const sr = identityEl?.shadowRoot;
if (!sr) return;
const themeRow = sr.querySelector('.dropdown-theme-row');
if (!themeRow || sr.getElementById('hide-forgotten-row')) return;
const divider = document.createElement('div');
divider.className = 'dropdown-divider';
const row = document.createElement('div');
row.id = 'hide-forgotten-row';
row.className = 'dropdown-theme-row';
row.style.cssText = 'justify-content: space-between; padding: 6px 16px; cursor: pointer;';
row.innerHTML = `
<span style="font-size: 0.85rem; color: var(--rs-text-secondary, #94a3b8);">👁 Hide Forgotten</span>
<label class="theme-toggle" style="width: 40px; height: 22px;">
<input type="checkbox" id="hide-forgotten-toggle" ${isHiddenInit ? 'checked' : ''} />
<span class="theme-slider"></span>
</label>
`;
// Insert after theme row's next sibling (the divider after theme)
const nextDiv = themeRow.nextElementSibling;
if (nextDiv) {
nextDiv.after(row);
nextDiv.after(divider);
}
const cb = sr.getElementById('hide-forgotten-toggle');
if (cb) {
cb.addEventListener('click', (e) => e.stopPropagation());
cb.addEventListener('change', () => toggleHideForgotten());
}
}
// Identity renders asynchronously — observe until dropdown is ready
if (identityEl) {
const obs = new MutationObserver(() => {
injectHideForgotten();
if (identityEl.shadowRoot?.getElementById('hide-forgotten-row')) obs.disconnect();
});
obs.observe(identityEl, { childList: true, subtree: true });
// Also try immediately in case it's already rendered
setTimeout(injectHideForgotten, 500);
setTimeout(injectHideForgotten, 2000);
}
}
// Refresh panel when shapes change state via remote sync // Refresh panel when shapes change state via remote sync
sync.addEventListener("shape-forgotten", () => { sync.addEventListener("shape-forgotten", () => {
@ -4587,7 +4758,7 @@
const btn = e.target.closest("button"); const btn = e.target.closest("button");
if (!btn) return; if (!btn) return;
// Keep open for connect, memory, group toggles, collapse, whiteboard tools // Keep open for connect, memory, group toggles, collapse, whiteboard tools
const keepOpen = ["toggle-memory", "toggle-hide-forgotten", "toggle-theme", "zoom-in", "zoom-out", "reset-view", "toolbar-collapse"]; const keepOpen = ["toggle-theme", "toolbar-collapse"];
if (btn.classList.contains("toolbar-group-toggle")) return; if (btn.classList.contains("toolbar-group-toggle")) return;
if (!keepOpen.includes(btn.id)) { if (!keepOpen.includes(btn.id)) {
toolbarEl.classList.remove("mobile-open"); toolbarEl.classList.remove("mobile-open");

8
website/public/shell.css
View File

@ -293,7 +293,8 @@ body {
.rstack-tab-row, .rstack-tab-row,
#app, #app,
.rspace-iframe-wrap { .rspace-iframe-wrap,
#toolbar {
transition: margin-left 0.25s ease, left 0.25s ease; transition: margin-left 0.25s ease, left 0.25s ease;
} }
@ -309,6 +310,10 @@ body.rstack-sidebar-open .rspace-iframe-wrap {
left: 280px; left: 280px;
} }
body.rstack-sidebar-open #toolbar {
left: 292px; /* 280px sidebar + 12px original margin */
}
/* ── Mobile adjustments ── */ /* ── Mobile adjustments ── */
@media (max-width: 640px) { @media (max-width: 640px) {
@ -375,6 +380,7 @@ body.rstack-sidebar-open .rspace-iframe-wrap {
body.rstack-sidebar-open .rstack-tab-row { left: 0; } body.rstack-sidebar-open .rstack-tab-row { left: 0; }
body.rstack-sidebar-open #app { margin-left: 0; } body.rstack-sidebar-open #app { margin-left: 0; }
body.rstack-sidebar-open .rspace-iframe-wrap { left: 0; } body.rstack-sidebar-open .rspace-iframe-wrap { left: 0; }
body.rstack-sidebar-open #toolbar { left: 12px; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {