anentrypoint-design 0.0.172 → 0.0.174

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/247420.js +22 -17
  2. package/package.json +1 -1
  3. package/src/components/content.js +52 -11
  4. package/src/components/files-modals.js +80 -65
  5. package/src/components/files.js +26 -20
  6. package/src/components/form-primitives.js +5 -2
  7. package/src/components/freddie/runtime.js +1 -1
  8. package/src/components/freddie.js +65 -41
  9. package/src/components/interaction-primitives.js +25 -2
  10. package/src/components/overlay-primitives.js +75 -31
  11. package/src/components/shell.js +11 -7
  12. package/src/page-html.js +17 -3
package/src/components/shell.js CHANGED
@@ -64,13 +64,17 @@ export function Badge({ children, variant = 'default', tone = 'neutral' }) {
64
64
  }
65
65
 
66
66
  export function Glyph({ children, color, size = 'base', label } = {}) {
67
- const fontSize = size === 'sm' ? '11px' : (size === 'lg' ? '16px' : '13px');
68
- const style = `font-size:${fontSize}` + (color ? `;color:${color}` : '');
67
+ // Font-size is var-driven per size class (--glyph-size-{size}) so themes can
68
+ // retune glyph scale; inline fallback keeps sizing if the SDK CSS hasn't
69
+ // loaded yet. Size class is the stable hook (glyph-sm / glyph-base / glyph-lg).
70
+ const fallback = size === 'sm' ? '11px' : (size === 'lg' ? '16px' : '13px');
71
+ const cls = 'glyph glyph-' + size;
72
+ const style = `font-size:var(--glyph-size-${size}, ${fallback})` + (color ? `;color:${color}` : '');
69
73
  // Decorative by default (screen readers skip the glyph char). Pass `label`
70
74
  // to expose an accessible name instead.
71
75
  return h('span', label
72
- ? { class: 'glyph', style, role: 'img', 'aria-label': label }
73
- : { class: 'glyph', style, 'aria-hidden': 'true' }, children);
76
+ ? { class: cls, style, role: 'img', 'aria-label': label }
77
+ : { class: cls, style, 'aria-hidden': 'true' }, children);
74
78
  }
75
79
 
76
80
  // Monochrome inline-SVG icons (stroke=currentColor) so chrome reads as one
@@ -135,7 +139,7 @@ export function Icon(name, { size = 16 } = {}) {
135
139
  return h('svg', {
136
140
  class: 'ds-icon ds-icon-' + name,
137
141
  width: String(size), height: String(size), viewBox: '0 0 24 24',
138
- fill: 'none', stroke: 'currentColor', 'stroke-width': '1.6',
142
+ fill: 'none', stroke: 'currentColor', 'stroke-width': 'var(--ds-icon-stroke, 1.6)',
139
143
  'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true',
140
144
  dangerouslySetInnerHTML: { __html: inner }
141
145
  });
@@ -146,7 +150,7 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
146
150
  Brand({ name: brand, leaf }),
147
151
  search ? h('label', { class: 'app-search' },
148
152
  h('span', { class: 'icon', 'aria-hidden': 'true' }, 'search'),
149
- h('input', { type: 'search', placeholder: search, 'aria-label': `search ${search}` })
153
+ h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
150
154
  ) : null,
151
155
  h('nav', { 'aria-label': 'main navigation' }, ...items.map(([label, href]) => {
152
156
  const cleanLabel = String(label).replace(' ->', '');
@@ -183,7 +187,7 @@ export function Side({ sections = [] } = {}) {
183
187
  // Each section is a group labelled by its heading, so AT users hear the
184
188
  // heading as the group name instead of an orphan heading.
185
189
  return h('div', { class: 'app-side-group', key: sec.group, role: 'group', 'aria-labelledby': groupId },
186
- h('div', { class: 'group', id: groupId, role: 'heading', 'aria-level': '2' }, sec.group),
190
+ h('h2', { class: 'group', id: groupId }, sec.group),
187
191
  ...sec.items.map((item, i) => {
188
192
  const { glyph, label, href = '#', active, count, color, onClick } = item;
189
193
  const countLabel = (count != null && count !== 0 && count !== '0') ? ` (${count})` : '';
package/src/page-html.js CHANGED
@@ -82,6 +82,15 @@ export function renderPageHtml({
82
82
  bodyHtml: body ? renderMarkdown(body) : '',
83
83
  };
84
84
 
85
+ // Theme attribute co-location is CORRECT here: dist/247420.css keys every
86
+ // theme block off the COMPOUND selector `.ds-247420[data-theme="X"]`
87
+ // (verified in dist/247420.css ~L229). That selector requires BOTH the class
88
+ // and the data-theme on the SAME node, so `<html class="ds-247420"
89
+ // data-theme=...>` is what the CSS expects for SSR. The AGENTS.md
90
+ // "descendant-selector" warning is about the dashboard's RUNTIME controller,
91
+ // which splits them (.ds-247420 on <html>, data-theme on <body>) and relies
92
+ // on inheritance — a different mechanism. Do NOT move data-theme to <body>
93
+ // here or the theme blocks stop matching.
85
94
  return `<!doctype html>
86
95
  <html lang="en" class="ds-247420" data-theme="${theme}">
87
96
  <head>
@@ -115,15 +124,20 @@ a.row:hover .ds-row-arrow { opacity: 1 }
115
124
  .ds-hero-stat { display: flex; align-items: baseline; gap: var(--space-2, 8px) }
116
125
  .ds-hero-stat-n { font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-lg, 18px); color: var(--fg) }
117
126
  .ds-hero-stat-l { font-size: var(--fs-sm, 15px); color: var(--fg-3) }
127
+ /* accent sits on its own line, muted, so it reads as a distinct aside instead
128
+ of running on from the hero body sentence. */
129
+ .ds-hero-accent { display: block; margin-top: var(--space-2, 8px); color: var(--fg-3) }
118
130
  /* feature rows — single-column stack with a rail accent (the dashboard .row grid
119
131
  forces a 3-col code/title/meta layout that mangles title+desc+benefit) */
120
- .ds-feature { position: relative; padding: var(--space-3, 16px) var(--space-4, 24px); background: var(--bg, #fff); border-radius: var(--r-2, 14px); display: grid; gap: var(--space-1, 4px) }
132
+ /* background uses a theme-neutral panel token (resolves per data-theme) so dark
133
+ mode doesn't flash a literal white card before/independent of the bundle. */
134
+ .ds-feature { position: relative; padding: var(--space-3, 16px) var(--space-4, 24px); background: var(--panel-1, var(--bg)); border-radius: var(--r-2, 14px); display: grid; gap: var(--space-1, 4px) }
121
135
  .ds-feature::before { content: ''; position: absolute; left: 0; top: var(--space-2, 8px); bottom: var(--space-2, 8px); width: 3px; border-radius: 3px; background: var(--rail-color, var(--rule-strong)) }
122
136
  .ds-feature.rail-green { --rail-color: var(--green) } .ds-feature.rail-purple { --rail-color: var(--purple) } .ds-feature.rail-mascot { --rail-color: var(--mascot) }
123
137
  .ds-feature.rail-sun { --rail-color: var(--sun) } .ds-feature.rail-flame { --rail-color: var(--flame) } .ds-feature.rail-sky { --rail-color: var(--sky) }
124
138
  .ds-feature + .ds-feature { margin-top: var(--space-2, 8px) }
125
139
  .ds-feature-title { font-weight: 600; font-size: var(--fs-lg, 18px); color: var(--fg) }
126
- .ds-feature-desc { font-size: var(--fs-sm, 15px); color: var(--fg-2); line-height: 1.5 }
140
+ .ds-feature-desc { font-size: var(--fs-sm, 15px); color: var(--fg-2); line-height: 1.5; overflow-wrap: anywhere }
127
141
  .ds-feature-benefit { font-style: italic; font-size: var(--fs-sm, 15px); color: var(--fg-3); margin-top: var(--space-1, 4px) }
128
142
  </style>
129
143
  <script id="__site__" type="application/json">${JSON.stringify(pageData).replace(/</g, '\\u003c')}</script>
@@ -175,7 +189,7 @@ function sectionNode(sec, idx) {
175
189
  children: [
176
190
  sec.lede ? h('p', { class: 'ds-lede' }, sec.lede) : null,
177
191
  ...rows,
178
- sec.body && sec.body.length >= 240 ? h('div', { class: 'page-body', innerHTML: __md(sec.body) }) : null,
192
+ sec.body && String(sec.body).trim() ? h('div', { class: 'page-body', innerHTML: __md(sec.body) }) : null,
179
193
  ].filter(Boolean),
180
194
  });
181
195
  }