anentrypoint-design 0.0.114 → 0.0.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.114",
+  "version": "0.0.117",
   "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/kits/os/freddie-dashboard.css

@@ -36,13 +36,13 @@
 /* chatlog (legacy fd-chat-msgs container) */
 .fd-chatlog {
     max-height: 420px; overflow-y: auto;
-    background: rgba(0,0,0,0.12);
+    background: var(--panel-2, #DDD3BC);
     border-radius: 4px; padding: 4px; margin-top: 8px;
 }
-.fd-chatlog-msg { padding: 6px 10px; border-bottom: 1px solid rgba(128,128,128,0.15); white-space: pre-wrap; word-break: break-word; }
-.fd-chatlog-assistant { color: var(--color-accent, #7c9); }
-.fd-chatlog-tool { margin: 4px 0; padding: 4px 8px; background: rgba(0,0,0,0.18); border-radius: 4px; font-family: monospace; font-size: 0.85em; }
-.fd-chatlog-tool-sum { cursor: pointer; color: var(--color-warn, #fc9); padding: 2px 0; }
+.fd-chatlog-msg { padding: 6px 10px; background: var(--panel-2, #DDD3BC); white-space: pre-wrap; word-break: break-word; }
+.fd-chatlog-assistant { color: var(--panel-accent, #3F8A4A); }
+.fd-chatlog-tool { margin: 4px 0; padding: 4px 8px; background: var(--panel-3, #C9BDA0); border-radius: 4px; font-family: var(--ff-mono, JetBrains Mono, monospace); font-size: 0.85em; }
+.fd-chatlog-tool-sum { cursor: pointer; color: var(--warn, #FF6B4A); padding: 2px 0; }
 .fd-chatlog-tool-body { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
 
 /* chip wraps (providers, env) */

package/src/kits/os/theme.css

@@ -1,4 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
 :root {
+    --ff-ui: 'Space Grotesk', system-ui, sans-serif;
+    --ff-display: 'Space Grotesk', system-ui, sans-serif;
+    --ff-mono: 'JetBrains Mono', ui-monospace, monospace;
     --os-accent: var(--panel-accent, #3F8A4A);
     --os-accent-2: var(--panel-accent-2, #2B6B36);
     --os-accent-soft: var(--panel-select, #D8ECCB);
@@ -18,8 +23,8 @@
     --os-bar-h-mobile: 52px;
     --os-rail-w: 64px;
     --os-tap: 44px;
-    --os-font: var(--ff-ui, 'Nunito', sans-serif);
-    --os-display: var(--ff-display, 'Archivo Black', 'Archivo', sans-serif);
+    --os-font: var(--ff-ui, 'Space Grotesk', system-ui, sans-serif);
+    --os-display: var(--ff-display, 'Space Grotesk', system-ui, sans-serif);
     --os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace);
 }
 
@@ -32,7 +37,9 @@ html, body {
 }
 
 .os-menubar, .os-taskbar {
-    background: var(--os-bg-2);
+    background: color-mix(in oklab, var(--os-bg-2) 88%, transparent);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     border: none;
     color: var(--os-fg);
     font: 13px var(--os-font);
@@ -410,3 +417,34 @@ html, body {
     .wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: var(--r-1, 6px) !important; background: var(--os-bg-3) !important; color: var(--os-fg) !important; }
     .wm-resize { display: none !important; }
 }
+
+/* ---- data-attr theme/density/accent rules (ported from anentrypoint-update colors_and_type.css) ---- */
+:root[data-theme="ink"] {
+  --os-bg-0: #14131a;
+  --os-bg-1: #1a1924;
+  --os-bg-2: #20202a;
+  --os-bg-3: #2a2a36;
+  --os-fg: #efece4;
+  --os-fg-2: #c8c5bc;
+  --os-fg-3: #8c8a80;
+  color-scheme: dark;
+}
+:root[data-theme="paper"] {
+  --os-bg-0: #f6f5f1;
+  --os-bg-1: #efece4;
+  --os-bg-2: #e7e3d8;
+  --os-bg-3: #d8d3c4;
+  --os-fg: #14131a;
+  --os-fg-2: #3a3833;
+  --os-fg-3: #6a6660;
+  color-scheme: light;
+}
+:root[data-density="compact"]  { --os-bar-h: 28px; --os-tile-pad: 6px; --os-gap: 6px; }
+:root[data-density="comfortable"] { --os-bar-h: 36px; --os-tile-pad: 10px; --os-gap: 10px; }
+:root[data-density="spacious"] { --os-bar-h: 44px; --os-tile-pad: 14px; --os-gap: 14px; }
+:root[data-accent="green"]   { --os-accent: #247420; --os-accent-tint: color-mix(in oklab, #247420 18%, transparent); }
+:root[data-accent="purple"]  { --os-accent: #7c5cff; --os-accent-tint: color-mix(in oklab, #7c5cff 18%, transparent); }
+:root[data-accent="mascot"]  { --os-accent: #ff6d3f; --os-accent-tint: color-mix(in oklab, #ff6d3f 18%, transparent); }
+:root[data-theme="ink"][data-accent="green"]   { --os-accent: #3FA93A; }
+:root[data-theme="ink"][data-accent="purple"]  { --os-accent: #a085ff; }
+:root[data-theme="ink"][data-accent="mascot"]  { --os-accent: #ff8a64; }

package/src/web-components/ds-chat.js

@@ -1,35 +1,106 @@
 // <ds-chat> custom element — auto-registers when SDK loads in a browser.
-// Properties: el.messages = [{role,text}, ...]; el.placeholder = string.
-// Emits a bubbling, composed 'send' event with { detail: { text } }.
+// Attributes / properties:
+//   el.messages = [{who,text,time,name,...}, ...]
+//   el.placeholder, el.title, el.sub, el.disabled
+// Emits a bubbling, composed 'send' event with { detail: { text } } when the
+// user submits via the built-in composer.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { Chat } from '../components/chat.js';
+import { Chat, ChatComposer } from '../components/chat.js';
 
 class DsChat extends HTMLElement {
     constructor() {
         super();
         this._messages = [];
         this._placeholder = 'type, then ⏎';
+        this._title = 'chat';
+        this._sub = '';
+        this._composerValue = '';
+        this._disabled = false;
+        this._scrollPending = false;
     }
-    static get observedAttributes() { return ['messages', 'placeholder']; }
+    static get observedAttributes() { return ['messages', 'placeholder', 'title', 'sub', 'disabled']; }
     attributeChangedCallback(name, _old, val) {
         if (name === 'messages') {
             try { this._messages = JSON.parse(val); } catch { this._messages = []; }
+            this._scrollPending = true;
         } else if (name === 'placeholder') {
             this._placeholder = val || '';
+        } else if (name === 'title') {
+            this._title = val || 'chat';
+        } else if (name === 'sub') {
+            this._sub = val || '';
+        } else if (name === 'disabled') {
+            this._disabled = val != null && val !== 'false';
         }
         this._render();
     }
-    set messages(v) { this._messages = Array.isArray(v) ? v : []; this._render(); }
+    set messages(v) { this._messages = Array.isArray(v) ? v : []; this._scrollPending = true; this._render(); }
     get messages() { return this._messages; }
     set placeholder(v) { this._placeholder = v || ''; this._render(); }
     get placeholder() { return this._placeholder; }
-    connectedCallback() { this.classList.add('ds-247420'); this._render(); }
-    _send(text) { this.dispatchEvent(new CustomEvent('send', { detail: { text }, bubbles: true, composed: true })); }
+    set title(v) { this._title = v || 'chat'; this._render(); }
+    get title() { return this._title; }
+    set sub(v) { this._sub = v || ''; this._render(); }
+    get sub() { return this._sub; }
+    set disabled(v) { this._disabled = !!v; this._render(); }
+    get disabled() { return this._disabled; }
+    connectedCallback() {
+        this.classList.add('ds-247420');
+        this._render();
+    }
+    _send(text) {
+        this._composerValue = '';
+        this.dispatchEvent(new CustomEvent('send', { detail: { text }, bubbles: true, composed: true }));
+        this._render();
+    }
     _render() {
         if (!this.isConnected) return;
-        const node = Chat({ messages: this._messages, onSend: (t) => this._send(t) });
+        // The factory captures `value` at construction time, so the click handler
+        // it builds sees a stale empty string. Pass a no-op and own send wiring
+        // ourselves by reading the live textarea below.
+        const self = this;
+        const composer = ChatComposer({
+            value: this._composerValue,
+            placeholder: this._placeholder,
+            disabled: this._disabled,
+            onInput: (v) => { self._composerValue = v; self._syncSendButton(); },
+            onSend: () => { /* superseded by live read below */ },
+        });
+        const node = Chat({
+            title: this._title,
+            sub: this._sub,
+            messages: this._messages,
+            composer,
+        });
         webjsx.applyDiff(this, node);
+        // Wire send button + Enter-key to read the LIVE textarea value rather than
+        // the closure's stale prop. Idempotent — only attach once per composer DOM node.
+        const composerEl = this.querySelector('.chat-composer');
+        if (composerEl && !composerEl._dsBound) {
+            composerEl._dsBound = true;
+            const ta = composerEl.querySelector('textarea');
+            const btn = composerEl.querySelector('button.send');
+            const submit = () => {
+                const v = ta ? ta.value.trim() : '';
+                if (!v || this._disabled) return;
+                if (ta) ta.value = '';
+                this._send(v);
+            };
+            if (btn) btn.addEventListener('click', (e) => { e.preventDefault(); submit(); });
+            if (ta) ta.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); }
+            });
+        }
+        if (this._scrollPending) {
+            this._scrollPending = false;
+            const thread = this.querySelector('.chat-thread');
+            if (thread) thread.scrollTop = thread.scrollHeight;
+        }
+    }
+    _syncSendButton() {
+        const btn = this.querySelector('.chat-composer button.send');
+        if (btn) btn.disabled = this._disabled || !this._composerValue.trim();
     }
 }