anentrypoint-design 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "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/shell/app-shell.js

@@ -15,9 +15,18 @@ const h = webjsx.createElement;
 // call site having to remember to wire ThemeToggle() in by hand. Pass
 // `themeToggle: false` to opt a shell out (e.g. a kit that renders its own).
 export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search, themeToggle = true } = {}) {
+    // `search` is either a plain placeholder string (Topbar renders the
+    // default uncontrolled input itself, and owns the icon below) or a
+    // caller-built VElement (has .type/.props — e.g. SearchInput(), a
+    // component that already renders its own icon + input + clear button).
+    // A VElement renders as-is with NO extra wrapper: SearchInput's own
+    // markup already covers the icon and the field, so wrapping it in
+    // Topbar's own '.app-search' icon+label previously doubled the search
+    // glyph (one from Topbar, one from inside SearchInput).
+    const isElement = search && typeof search === 'object' && 'type' in search;
     return h('header', { class: 'app-topbar', role: 'banner' },
         Brand({ name: brand, leaf }),
-        search ? h('label', { class: 'app-search' },
+        isElement ? search : (search ? h('label', { class: 'app-search' },
             // Line-icon, not the literal word "search" as a pseudo-glyph: the
             // text stand-in inherited .app-search .icon's 0.6 opacity, which
             // dropped --fg-3 to 3.74:1 on --bg-2 and failed AA as real text.
@@ -25,15 +34,8 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
             // contrast rule no longer applies to it and the affordance stops
             // depending on a colour value at all.
             h('span', { class: 'icon', 'aria-hidden': 'true' }, Icon('search', { size: 15 })),
-            // `search` is either a plain placeholder string (renders the
-            // default uncontrolled input) or a caller-built VElement (has
-            // .type/.props — e.g. a controlled <input> wired to app state)
-            // rendered as-is. Stringifying a VElement into placeholder/
-            // aria-label previously produced literal "[object Object]" text.
-            (search && typeof search === 'object' && 'type' in search)
-                ? search
-                : h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
-        ) : null,
+            h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
+        ) : null),
         h('nav', { 'aria-label': 'main navigation' }, ...items.map(([label, href]) => {
             const cleanLabel = String(label).replace(' ->', '');
             return h('a', {

package/src/css/app-shell/catalog-theme.css

@@ -143,16 +143,12 @@
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   display: inline-flex; align-items: center; gap: 6px;
 }
-/* CSS-drawn disc mark on the compact theme toggle: keeps the control
-   legible when its text label is hidden (icon-only rail strip). Per-mode
-   fill gives the icon itself a distinct look for auto/light/dark, so state
-   reads without relying on the title tooltip alone. */
-.ds-theme-disc {
-  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
-  border: var(--bw-hair) solid var(--fg-3);
-  /* auto: half-and-half, matches default (no data-mode) for safety */
-  background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
-}
+/* CSS-drawn disc mark on the compact theme toggle: legibility fallback for
+   when BOTH the SVG glyph and text label are hidden (icon-only rail strip).
+   The glyph (.ds-theme-toggle-icon) already conveys mode whenever it is
+   visible, so the disc stays hidden alongside it and only shows in the
+   rail-collapsed state where responsive2-workspace.css hides the icon too. */
+.ds-theme-disc { display: none; }
 .ds-theme-disc[data-mode="auto"] {
   background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
 }

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

@@ -79,6 +79,14 @@ body.canvas-host { background: transparent !important; }
 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
+/* SearchInput() passed directly as Topbar's search prop renders with no
+   Topbar-owned wrapper (see Topbar's isElement branch). Its own outer span
+   (.ds-search-input-wrap) is display:contents, so .ds-search-field becomes
+   the actual direct .app-topbar flex-item child — an inline-flex box that
+   otherwise shrinks to its content and starves the input's own width:100%
+   of anything to grow into, truncating the placeholder. Matches
+   .app-search's flex-basis above so both search-slot shapes size the same. */
+.app-topbar > .ds-search-field { flex: 1 1 auto; max-width: 360px; min-width: 0; }
 .app-topbar > nav { margin-left: auto; }
 /* Utility cluster grouping: the theme toggle sits after the repo-info nav
    links with no visual separation between the two groups, so the row read
@@ -410,8 +418,12 @@ body.canvas-host { background: transparent !important; }
      1400-2200px viewport band (matches .ws-shell's 1920px ultrawide cap below)
      instead of freezing at 1400px and leaving >1000px dead margin on a 2560px+
      display. Row/prose measure caps (--measure-wide etc.) still own line-length
-     readability, so widening the shell itself does not create unreadable rows. */
-  .app { max-width: clamp(1400px, 92vw, 1920px); margin-left: auto; margin-right: auto; }
+     readability, so widening the shell itself does not create unreadable rows.
+     100vw (not 92vw): a stock 1920px monitor sat at 92vw = 1766px, leaving a
+     visible ~154px dead margin on the single most common desktop resolution —
+     the ceiling now reaches full width exactly at 1920px instead of falling
+     short of it. */
+  .app { max-width: clamp(1400px, 100vw, 1920px); margin-left: auto; margin-right: auto; }
   .app-main .chat,
   .app-main > .chat-area,
   .app-main > .main-content { max-width: none; margin: 0; width: 100%; }