anentrypoint-design 1.0.26 → 1.0.28

package/colors_and_type.css

@@ -293,8 +293,8 @@
   --space-10:    192px;
 
   --density:     1;
-  --pad-y:       calc(var(--space-5) * var(--density));
-  --pad-x:       calc(var(--space-5) * var(--density));
+  --pad-y:       calc(var(--space-6) * var(--density));
+  --pad-x:       calc(var(--space-6) * var(--density));
   --gutter:      calc(var(--space-4) * var(--density));
 
   /* Borders — chunky or none */
@@ -433,7 +433,7 @@
      column growing without bound. */
   --stage-ultra: min(96%, 2100px);
 
-  --sidebar-width:           220px;
+  --sidebar-width:           256px;
   --sidebar-width-collapsed: 64px;
 
   /* Canonical breakpoint values — @media can't reference custom properties,

package/dist/247420.css

@@ -295,8 +295,8 @@
   --space-10:    192px;
 
   --density:     1;
-  --pad-y:       calc(var(--space-5) * var(--density));
-  --pad-x:       calc(var(--space-5) * var(--density));
+  --pad-y:       calc(var(--space-6) * var(--density));
+  --pad-x:       calc(var(--space-6) * var(--density));
   --gutter:      calc(var(--space-4) * var(--density));
 
   /* Borders — chunky or none */
@@ -435,7 +435,7 @@
      column growing without bound. */
   --stage-ultra: min(96%, 2100px);
 
-  --sidebar-width:           220px;
+  --sidebar-width:           256px;
   --sidebar-width-collapsed: 64px;
 
   /* Canonical breakpoint values — @media can't reference custom properties,
@@ -1195,8 +1195,8 @@
 
 .ds-247420 {
   --app-status-h: 26px;
-  --app-topbar-h: var(--size-lg);
-  --app-crumb-h: var(--size-sm);
+  --app-topbar-h: 64px;
+  --app-crumb-h: 56px;
 }
 
 .ds-247420 .app-topbar {
@@ -1205,7 +1205,7 @@
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
   padding: var(--space-2-5) var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 97%, transparent);
+  border-bottom: var(--bw-hair, 1px) solid var(--rule);
 }
 
 /* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
@@ -1218,7 +1218,7 @@
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
   padding: var(--space-2) var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 97%, transparent);
+  border-bottom: var(--bw-hair, 1px) solid var(--rule);
 }
 .ds-247420 .app-chrome > .app-topbar,
 .ds-247420 .app-chrome > .app-crumb {
@@ -1288,7 +1288,6 @@
    change. */
 .ds-247420 .app-topbar nav a.active {
   color: var(--accent-ink);
-  background: color-mix(in oklab, var(--accent) 16%, transparent);
   box-shadow: inset 0 -2px 0 0 var(--accent);
   font-weight: 600;
 }
@@ -1696,7 +1695,7 @@
 .ds-247420 .btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); }
 .ds-247420 .btn-primary {
   background: var(--accent); color: var(--accent-fg);
-  font-weight: 700;
+  font-weight: 600;
 }
 .ds-247420 .btn-primary:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow-2); }
 .ds-247420 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 var(--bw-hair) var(--fg); }
@@ -2348,30 +2347,21 @@
    and each part's own layout (aside becomes a full-width card below the body
    instead of a right-column card) changed. Centered text, capped measure.
 
-   DE-CENTERED 2026-07-31: the flex-stack architecture from the restyle above
-   is kept as-is (still a single-column stack, still the oversized display
-   lead, still the full-width aside card) -- this is NOT a revert to the old
-   two-column grid. What changed is alignment only: `align-items: center` /
-   `text-align: center` read as the textbook dead-centered "AI portfolio"
-   hero the moment the oversized display type is involved, regardless of
-   architecture. Swapping to flex-start + left text-align, plus a
-   --space-6 left inset inside the unchanged --stage-wide container, pushes
-   the whole block toward the left edge so the oversized title crops against
-   real whitespace on the right instead of sitting symmetric in the middle --
-   editorial tension from a one-axis asymmetry, no grid architecture
-   reintroduced. */
+   RE-CENTERED 2026-08-09: reverted the 2026-07-31 de-centering (flex-start +
+   left text-align + left inset) back to a centered stack -- the airy,
+   dead-centered arrangement is the intended house look after all, matching
+   the plain centered-lead reference this hero is now aligned to. Aside card
+   dropped its filled background/accent bar for a plain top-rule divider. */
 .ds-247420 .ds-hero {
   padding: var(--space-9) 0 var(--space-8);
-  display: flex; flex-direction: column; align-items: flex-start;
+  display: flex; flex-direction: column; align-items: center;
   gap: var(--space-5);
   max-width: var(--stage-wide);
-  margin-inline-start: 0;
-  padding-inline-start: var(--space-6);
-  text-align: left;
+  text-align: center;
   position: relative; isolation: isolate;
 }
-.ds-247420 .ds-hero-head { display: grid; gap: var(--space-3); justify-items: start; }
-.ds-247420 .ds-hero-body  { margin-inline: 0; }
+.ds-247420 .ds-hero-head { display: grid; gap: var(--space-3); justify-items: center; margin-inline: auto; }
+.ds-247420 .ds-hero-body  { margin-inline: auto; }
 /* The stat/badge/CTA cluster now sits as a full-width card BELOW the body
    copy, left-aligned with the rest of the stack, rather than a right-offset
    column -- still carries its own visual weight via the top accent bar
@@ -2380,18 +2370,14 @@
 .ds-247420 .ds-hero-aside {
   position: relative; isolation: isolate;
   width: 100%; max-width: 46ch;
+  margin-inline: auto;
   display: flex; flex-direction: column;
   justify-content: space-between; gap: var(--space-5);
-  background: var(--bg-2);
-  border-radius: var(--r-2);
-  padding: calc(var(--space-4) + var(--bw-chunk)) var(--space-5) var(--space-5);
+  background: transparent;
+  border-top: var(--bw-hair, 1px) solid var(--rule);
+  padding: var(--space-4) var(--space-5) var(--space-5);
   text-align: left;
 }
-.ds-247420 .ds-hero-aside::before {
-  content: ''; position: absolute; left: 0; right: 0; top: 0;
-  height: var(--bw-chunk); background: var(--accent);
-  border-radius: var(--bw-chunk) var(--bw-chunk) 0 0;
-}
 .ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
 .ds-247420 .ds-hero-stat {
   font-family: var(--ff-mono); font-size: var(--fs-sm);
@@ -2419,7 +2405,7 @@
      feel this title wants while clearing enough vertical room that letters
      stop colliding. */
   line-height: 1.02; letter-spacing: var(--tr-tighter);
-  margin: 0; max-width: 20ch; text-wrap: balance;
+  margin: 0; max-width: 16ch; margin-inline: auto; text-wrap: balance;
 }
 .ds-247420 .ds-hero-body {
   font-family: var(--ff-body); font-size: var(--fs-xl);
@@ -2513,7 +2499,7 @@
    ============================================================ */
 .ds-247420 .ds-marquee {
   overflow: hidden; width: 100%;
-  border-block: var(--bw-rule) solid var(--fg);
+  border-block: var(--bw-hair) solid var(--rule-strong);
   padding: var(--space-2) 0;
   font-family: var(--ff-display); font-weight: 600;
   text-transform: uppercase; letter-spacing: var(--tr-caps);
@@ -3502,7 +3488,7 @@
   padding: var(--space-1) var(--space-2);
   background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
 }
-.ds-247420 .ds-bulkbar-count { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); }
+.ds-247420 .ds-bulkbar-count { font-size: var(--fs-sm); font-weight: var(--fw-medium, 500); color: var(--fg-2); }
 /* BulkBar is a toolbar (it even declares role=toolbar): compact rect buttons,
    quiet destructive outline - the app arm-confirms destructive bulk actions
    via ConfirmDialog, so the strip never needs a loud CTA. */
@@ -3727,7 +3713,7 @@
    design; dashed was this system's OTHER "drop target" vocabulary
    (.panel-docs, kits-appended.css) leaking in here by copy-paste. */
 .ds-247420 .ds-dropzone {
-  border: var(--bw-rule) solid var(--rule);
+  border: var(--bw-hair) solid var(--rule);
   border-radius: var(--r-3); background: var(--bg);
   transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
@@ -4304,7 +4290,7 @@
   width: 36px; height: 36px; flex-shrink: 0;
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--ff-body); font-size: var(--fs-micro); font-weight: 600;
+  font-family: var(--ff-body); font-size: var(--fs-micro); font-weight: var(--fw-medium, 500);
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
@@ -4612,7 +4598,7 @@
   font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
   padding: 0 var(--space-1-75); letter-spacing: 0.02em;
 }
-.ds-247420 .chat-meta .who { font-weight: 600; color: var(--fg-2); }
+.ds-247420 .chat-meta .who { font-weight: var(--fw-medium, 500); color: var(--fg-2); }
 .ds-247420 .chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
 .ds-247420 .chat-meta .t { color: var(--fg-3); }
 .ds-247420 .chat-meta .tick { color: var(--fg-3); margin-left: var(--space-hair); letter-spacing: -2px; font-family: var(--ff-body); }
@@ -4638,7 +4624,7 @@
   color: var(--accent-ink);
 }
 .ds-247420 .chat-reactions .rxn .e { font-size: var(--fs-xs); line-height: 1; }
-.ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fs-nano); color: var(--fg-2); }
+.ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: var(--fw-medium, 500); font-size: var(--fs-nano); color: var(--fg-2); }
 .ds-247420 .chat-reactions .rxn.you .n { color: var(--accent-ink); }
 
 /* Typing indicator renders through the same .chat-bubble container as a real
@@ -4810,7 +4796,27 @@
    [data-theme="dark"],[data-theme="ink"] override missed data-theme="auto"
    under OS-dark, which is how the kits actually render — the author name
    fell back to the paper tone at 3.13:1 on ink. */
-.ds-247420 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
+.ds-247420 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: var(--fw-medium, 500); }
+
+/* Mascot identity folded into AICat's own .chat-head row (passed as its
+   `header` prop) instead of a standalone .aicat-portrait block stacked above
+   the chat panel -- reuses the existing 32px .aicat-face circle, just placed
+   inline before the title instead of above the whole surface. */
+.ds-247420 .aicat-portrait-head { gap: var(--space-2-5); }
+.ds-247420 .aicat-face-inline { margin-right: var(--space-1); }
+
+/* Centers the transcript+composer as the page's dominant focal surface
+   (hero-composer framing): a bounded column with generous top margin so the
+   chat panel reads as the first thing the eye lands on, not one card in a
+   top-aligned marketing stack. Docs/heading content is demoted into
+   .ds-kit-controls below it (see kits-appended.css) so nothing above the
+   panel competes with it. */
+.ds-247420 .aicat-focus-col {
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: var(--space-6);
+}
 
 /* ============================================================
    Composer attachment-detected badge, context line, hint, toolbar,
@@ -4998,6 +5004,50 @@
 .ds-247420 .app-side a .glyph { font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
 .ds-247420 .app-side a.active .glyph { color: var(--accent-ink); }
 
+/* .ds-side-tree — two-level project-tree group (parent <details> + nested
+   child rows), the sidebar's hierarchy primitive. Sits alongside Side()'s
+   own flat .app-side-group rows but carries genuine nesting: a summary row
+   (parent) disclosing child conversation rows, closer to a project-tree
+   sidebar than a single flat list. */
+.ds-247420 .ds-side-tree { border: 0; }
+.ds-247420 .ds-side-tree-summary {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1-5) var(--space-2);
+  border-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-2);
+  cursor: pointer; list-style: none;
+}
+.ds-247420 .ds-side-tree-summary::-webkit-details-marker { display: none; }
+.ds-247420 .ds-side-tree-summary:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .ds-side-tree-summary:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-247420 .ds-side-tree-summary .glyph { font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: var(--fg-3); }
+.ds-247420 .ds-side-tree-summary .count {
+  margin-left: auto; padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
+  font-family: var(--ff-body); letter-spacing: 0.04em; min-width: 18px; text-align: center;
+  color: var(--fg-3); background: var(--bg-2); border-radius: var(--r-pill, 999px);
+}
+.ds-247420 .ds-side-tree-children {
+  display: flex; flex-direction: column;
+  padding-left: var(--space-4);
+  gap: var(--space-hair);
+}
+.ds-247420 .ds-side-tree-child {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
+  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ds-247420 .ds-side-tree-child:hover, .ds-247420 .ds-side-tree-child:focus-visible { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .ds-side-tree-child:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-247420 .ds-side-tree-child .glyph { font-family: var(--ff-body); color: var(--fg-3); }
+
 /* -- select primitive --------------------------------------------------- */
 .ds-247420 .ds-select {
     width: 100%;
@@ -6880,7 +6930,7 @@
 @media (max-width: 640px) {
   .ds-247420 .ds-session-row-span { flex-basis: 100%; }
 }
-.ds-247420 .ds-session-row-devcnt { color: var(--warn); font-weight: 600; }
+.ds-247420 .ds-session-row-devcnt { color: var(--warn); font-weight: var(--fw-medium, 500); }
 .ds-247420 .ds-session-row-span { font-size: var(--fs-micro); color: var(--fg-3); }
 
 /* DevRow */
@@ -8176,7 +8226,7 @@
   padding: var(--space-3) var(--space-4);
   border-bottom: var(--bw-hair) solid var(--rule); flex: 0 0 auto;
 }
-.ds-247420 .ds-plugins-title { font-size: var(--fs-md); font-weight: 700; color: var(--fg); }
+.ds-247420 .ds-plugins-title { font-size: var(--fs-md); font-weight: 600; color: var(--fg); }
 .ds-247420 .ds-plugins-close {
   background: none; border: none; color: var(--fg-3); cursor: pointer;
   font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: var(--r-1);
@@ -8447,7 +8497,7 @@
   width: 18px; height: 18px;
   border-radius: var(--r-pill);
   background: var(--bg-1);
-  border: var(--bw-rule) solid var(--accent);
+  border: var(--bw-hair) solid var(--accent);
   box-shadow: var(--shadow-1);
   transform: translate(-50%, -50%);
   pointer-events: none;
@@ -8483,7 +8533,7 @@
   font-weight: 600;
   color: var(--fg);
   background: var(--bg-2);
-  border: var(--bw-rule) solid var(--rule);
+  border: var(--bw-hair) solid var(--rule);
   border-radius: var(--r-1);
   transition: border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
 }