anentrypoint-design 0.0.462 → 0.0.464

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.462",
+  "version": "0.0.464",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/freddie/pages-chat.js

@@ -86,13 +86,30 @@ function applyEnvelope(msgs, env, sendApprove) {
 }
 
 export const chat = makePage((ctx) => {
-    Object.assign(ctx.state, { loading: false, messages: [], draft: '', busy: false, error: null, sessionId: null, ws: null, conn: 'closed', sessions: [] });
+    Object.assign(ctx.state, { loading: false, messages: [], draft: '', busy: false, error: null, sessionId: null, ws: null, conn: 'closed', sessions: [], staged: [] });
 
     // Session picker (kimi web's sessions sidebar, compact form): recent
     // conversations from /api/sessions, needsInput badges included. Picking
     // one reconnects the WS under that id and rebuilds from server replay.
     api('/api/sessions').then(rows => { ctx.state.sessions = Array.isArray(rows) ? rows : []; ctx.rerender(); }).catch(() => { /* swallow: picker degrades to new-chat-only */ });
 
+    // File upload (kimi web parity): files are staged to disk via the gui-agent
+    // endpoint and ride the next prompt frame as path references — the agent
+    // reads them with its file tools, so no model-capability negotiation here.
+    async function attachFiles(fileList) {
+        const st = ctx.state;
+        if (!st.sessionId) st.sessionId = newSessionId();
+        for (const file of fileList || []) {
+            try {
+                const dataUrl = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(file); });
+                const base64 = String(dataUrl).split(',')[1] || '';
+                const r = await api('/api/sessions/' + encodeURIComponent(st.sessionId) + '/files', { method: 'POST', body: { name: file.name, contentBase64: base64 } });
+                if (r && r.path) { st.staged = [...st.staged, { name: r.name || file.name, path: r.path }]; }
+            } catch (e) { ctx.set({ error: 'upload failed: ' + (e && e.message || e) }); }
+        }
+        ctx.rerender();
+    }
+
     function switchSession(id) {
         const st = ctx.state;
         if (!id || id === st.sessionId) return;
@@ -206,11 +223,13 @@ export const chat = makePage((ctx) => {
             return;
         }
 
-        if (!ensureWs() || !sendFrame({ type: 'prompt', text: t })) {
+        if (!ensureWs() || !sendFrame({ type: 'prompt', text: t, attachments: s().staged.map(f => ({ name: f.name, path: f.path })) })) {
             curMsg.error = 'agent workspace connection unavailable';
             delete curMsg._live;
             ctx.set({ busy: false });
+            return;
         }
+        ctx.set({ staged: [] });
     }
 
     function stop() {
@@ -223,14 +242,20 @@ export const chat = makePage((ctx) => {
     return () => {
         const st = s();
         return h('div', { class: 'fd-chat' },
-            st.sessions.length ? h('div', { class: 'fd-chat-picker' },
-                Select({
+            h('div', { class: 'fd-chat-picker' },
+                st.sessions.length ? Select({
                     value: st.sessionId || '',
                     placeholder: 'new conversation',
                     'aria-label': 'switch conversation',
                     options: st.sessions.map(row => ({ value: row.id, label: (row.title || '(untitled)').slice(0, 60) + (row.needsInput ? ' — needs input' : '') })),
                     onChange: switchSession,
-                })) : null,
+                }) : null,
+                h('label', { class: 'fd-chat-attach', title: 'attach files to the next message' },
+                    'attach',
+                    h('input', { type: 'file', multiple: true, style: 'display:none', onchange: (e) => { attachFiles(e.target.files); e.target.value = ''; } })),
+                ...st.staged.map((f, i) => h('span', { key: 'st' + i, class: 'fd-chat-staged' },
+                    f.name,
+                    h('button', { type: 'button', class: 'fd-chat-staged-x', 'aria-label': 'remove ' + f.name, onclick: () => { st.staged = st.staged.filter((_, j) => j !== i); ctx.rerender(); } }, '×')))),
             AgentChat({
                 messages: st.messages,
                 busy: st.busy,

package/src/components/shell/app-shell.js

@@ -40,6 +40,13 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
                     if (!String(href).startsWith('http') && onNav) {
                         e.preventDefault();
                         onNav(cleanLabel);
+                        // preventDefault above blocks the browser's own
+                        // anchor-jump, so a #-target must be scrolled to
+                        // manually or the click looks purely decorative.
+                        if (String(href).startsWith('#')) {
+                            const target = document.getElementById(href.slice(1));
+                            if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
                     }
                 }
             }, label);

package/src/css/app-shell/base.css

@@ -186,6 +186,29 @@ h3 + .lede, h3 + .t-lede,
   margin-top: var(--space-2);
 }
 
+/* A lede immediately followed by the article body is a named pairing too --
+   same rationale as the heading+lede gap above. Without this, .lede's
+   margin:0 leaves zero space above the first paragraph while every
+   paragraph-to-paragraph gap below it uses --space-4 (.ds-prose p), so the
+   dek reads as glued to the body it introduces. */
+.lede + .post-body, .t-lede + .post-body,
+.lede + .ds-prose, .t-lede + .ds-prose {
+  margin-top: var(--space-4);
+}
+
+/* Same gap-ownership problem again for .ds-section (hero-content.css):
+   `* + .ds-section { margin-top: 0 }` deliberately relies on the PRECEDING
+   sibling supplying the lead-in space, so two spacing primitives can
+   coordinate into one gap instead of stacking. .lede supplies none (margin:0
+   by design), so a lede-then-section pairing (e.g. project_page's h1 -> lede
+   -> "install" section) collapses to a flush 0px gap instead of inheriting
+   .ds-section's own --space-8 lead. Measured live on project_page: the
+   "install" h3 sat ~4px from the lede above it (padding only) vs the
+   intended --space-8/2 gap other section-adjacent siblings get. */
+.lede + .ds-section, .t-lede + .ds-section {
+  margin-top: var(--space-8);
+}
+
 .eyebrow {
   font-family: var(--ff-mono);
   font-size: var(--fs-tiny);

package/src/css/app-shell/hero-content.css

@@ -299,6 +299,13 @@ table th {
   color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
   background: var(--bg-2);
 }
+/* letter-spacing adds trailing space AFTER the last glyph too, but the table's
+   own border-radius+overflow:hidden (above) clips flush to the card edge --
+   the last header's positive tracking bleeds past its own padding box and
+   gets cropped mid-word ("STATUS" -> "STATI"). Absorb that bleed with a bit
+   of extra right padding on the last column only, so no header text sits
+   closer to the clip edge than --tr-caps can push it. */
+table th:last-child { padding-right: calc(var(--space-2-75) + var(--tr-caps, 0px)); }
 table td { padding: calc(var(--space-2) * var(--density)) var(--space-2-75); border-top: 1px solid var(--rule); }
 table tr.clickable { cursor: pointer; }
 table tr.clickable:hover td { background: var(--bg-2); }

package/src/css/app-shell/states-interactions.css

@@ -422,6 +422,40 @@ hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
   border-bottom-color: var(--accent-ink);
 }
 
+/* Switch primitive (form-primitives.js Toggle) -- track + sliding knob.
+   Previously unstyled anywhere in this repo (a bare button with no visible
+   affordance), so every real consumer resorted to a local literal-bracket-
+   text reimplementation ('[x] on'/'[ ] off') instead. Sized off --space
+   tokens: a 40x22 track (2x11 knob diameter + 2px inset each side) is the
+   standard iOS/Material switch proportion, not an arbitrary literal. */
+.ds-toggle {
+  appearance: none; -webkit-appearance: none;
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  width: 40px; height: 22px; padding: 2px;
+  border: 1px solid var(--rule-strong); border-radius: var(--r-pill, 999px);
+  background: var(--bg-3); box-shadow: none; cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
+}
+.ds-toggle-knob {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--fg-3);
+  transition: transform var(--dur-snap) var(--ease), background-color var(--dur-snap) var(--ease);
+}
+.ds-toggle[aria-checked="true"] {
+  background: var(--accent-ink); border-color: var(--accent-ink);
+}
+.ds-toggle[aria-checked="true"] .ds-toggle-knob {
+  background: var(--panel-0, #fff);
+  transform: translateX(18px);
+}
+.ds-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
+.ds-toggle:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-toggle-row { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
+.ds-toggle-row .ds-toggle-label { color: inherit; }
+
 /* -- Field controls: themed base for TextField / Select / SearchInput --
    Root fix: previously only `transition` was set, so themed apps got
    browser-default white boxes in dark mode and labels collided with inputs