diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts
index 2657e0a..493aaf6 100644
--- a/lib/folk-shape.ts
+++ b/lib/folk-shape.ts
@@ -426,6 +426,9 @@ export class FolkShape extends FolkElement {
}
handleEvent(event: PointerEvent | KeyboardEvent | TouchEvent) {
+ // In feed mode, suppress all drag/resize interactions
+ if (this.closest('#canvas.feed-mode')) return;
+
// Handle touch events for mobile drag support
if (event instanceof TouchEvent) {
const target = event.composedPath()[0] as HTMLElement;
diff --git a/website/canvas.html b/website/canvas.html
index 612d394..e4045e3 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1272,6 +1272,44 @@
overflow: visible;
}
+ /* ── Feed mode ── */
+ #canvas.feed-mode {
+ overflow-y: auto;
+ overflow-x: hidden;
+ touch-action: pan-y;
+ }
+ #canvas.feed-mode #canvas-content {
+ transform: none !important;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ padding: 16px 8px 80px;
+ width: 100%;
+ min-height: 100%;
+ position: relative;
+ }
+ #canvas.feed-mode folk-shape,
+ #canvas.feed-mode [is="folk-shape"] {
+ position: relative !important;
+ transform: none !important;
+ width: min(100%, 480px) !important;
+ height: auto !important;
+ min-height: 200px;
+ flex-shrink: 0;
+ }
+ /* Hide arrows/connections in feed mode */
+ #canvas.feed-mode folk-arrow {
+ display: none !important;
+ }
+ /* Hide grid background in feed mode */
+ #canvas.feed-mode {
+ background: var(--canvas-feed-bg, #f8fafc);
+ }
+ body[data-theme="dark"] #canvas.feed-mode {
+ background: #0f172a;
+ }
+
#canvas-content.hide-forgotten :state(forgotten) {
display: none !important;
}
@@ -1507,6 +1545,78 @@
max-height: 50vh;
}
}
+
+ /* ── Feed sort bar ── */
+ #feed-sort-bar {
+ position: fixed;
+ top: 108px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 12px;
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+ z-index: 1001;
+ font-size: 13px;
+ }
+ body[data-theme="dark"] #feed-sort-bar {
+ background: #1e293b;
+ color: #e2e8f0;
+ }
+ #feed-sort-bar.hidden { display: none; }
+ #feed-sort {
+ padding: 4px 8px;
+ border: 1px solid #cbd5e1;
+ border-radius: 6px;
+ font-size: 13px;
+ background: white;
+ cursor: pointer;
+ }
+ body[data-theme="dark"] #feed-sort {
+ background: #334155;
+ border-color: #475569;
+ 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) {
+ #feed-sort-bar {
+ top: 64px;
+ left: 8px;
+ right: 8px;
+ transform: none;
+ }
+ }