@valentinkolb/cloud 0.4.0 → 0.5.1

package/src/styles/utilities-buttons.css

@@ -1,9 +1,17 @@
 /* Button and input utility classes — flat, solid */
+@utility focus-ui {
+  @apply focus-visible:outline-none;
+
+  &:focus-visible {
+    box-shadow: var(--theme-focus-ring);
+  }
+}
+
 @utility btn-base {
   @apply inline-flex cursor-pointer items-center justify-center gap-1.5 select-none rounded-md font-medium border;
-  @apply transition-[background-color,color,border-color,opacity] duration-150 ease-out;
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950;
-  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+  @apply transition-[background-color,color,border-color,box-shadow,opacity] duration-150 ease-out;
+  @apply focus-ui;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none disabled:shadow-none;
 }
 
 @utility btn-sm {
@@ -27,17 +35,21 @@
   @apply dark:active:bg-zinc-700;
 }
 
-/* Primary: outlined blue, fills on hover */
+/* Primary: filled blue + soft bevel; darkens on hover; sinks (inset) on press */
 @utility btn-primary {
-  @apply btn-base bg-white text-blue-600 border-blue-400;
-  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500;
-  @apply active:bg-blue-600 active:border-blue-600;
-  @apply dark:bg-transparent dark:text-blue-400 dark:border-blue-400;
-  @apply dark:hover:bg-blue-500 dark:hover:text-white dark:hover:border-blue-500;
-  @apply dark:active:bg-blue-600;
+  @apply btn-base bg-blue-500 text-white border-blue-600;
+  @apply hover:bg-blue-600 hover:border-blue-700;
+  @apply active:bg-blue-700 active:border-blue-700;
+  @apply dark:bg-blue-500 dark:text-white dark:border-blue-600;
+  @apply dark:hover:bg-blue-600 dark:hover:border-blue-700;
+  @apply dark:active:bg-blue-700;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.26), inset 0 -1px 1px 0 rgb(0 0 0 / 0.16);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
 }
 
-/* Secondary: flat zinc, no border */
+/* Secondary: filled zinc + soft bevel; sinks on press */
 @utility btn-secondary {
   @apply btn-base bg-zinc-100 text-zinc-700 border-transparent;
   @apply hover:bg-zinc-200;
@@ -45,40 +57,76 @@
   @apply dark:bg-zinc-800 dark:text-zinc-200 dark:border-transparent;
   @apply dark:hover:bg-zinc-700;
   @apply dark:active:bg-zinc-600;
+  box-shadow: var(--theme-bevel-top), var(--theme-bevel-bottom);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
 }
 
-/* Success: outlined green, fills on hover */
+/* Success: filled emerald + soft bevel; sinks on press */
 @utility btn-success {
-  @apply btn-base bg-white text-emerald-600 border-emerald-400;
-  @apply hover:bg-emerald-500 hover:text-white hover:border-emerald-500;
-  @apply active:bg-emerald-600 active:border-emerald-600;
-  @apply dark:bg-transparent dark:text-emerald-400 dark:border-emerald-400;
-  @apply dark:hover:bg-emerald-500 dark:hover:text-white dark:hover:border-emerald-500;
-  @apply dark:active:bg-emerald-600;
+  @apply btn-base bg-emerald-500 text-white border-emerald-600;
+  @apply hover:bg-emerald-600 hover:border-emerald-700;
+  @apply active:bg-emerald-700 active:border-emerald-700;
+  @apply dark:bg-emerald-500 dark:text-white dark:border-emerald-600;
+  @apply dark:hover:bg-emerald-600 dark:hover:border-emerald-700;
+  @apply dark:active:bg-emerald-700;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.26), inset 0 -1px 1px 0 rgb(0 0 0 / 0.16);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
 }
 
-/* Danger: outlined red, fills on hover */
+/* Danger: filled red + soft bevel; sinks on press */
 @utility btn-danger {
-  @apply btn-base bg-white text-red-600 border-red-400;
-  @apply hover:bg-red-500 hover:text-white hover:border-red-500;
-  @apply active:bg-red-600 active:border-red-600;
-  @apply dark:bg-transparent dark:text-red-400 dark:border-red-400;
-  @apply dark:hover:bg-red-500 dark:hover:text-white dark:hover:border-red-500;
-  @apply dark:active:bg-red-600;
+  @apply btn-base bg-red-500 text-white border-red-600;
+  @apply hover:bg-red-600 hover:border-red-700;
+  @apply active:bg-red-700 active:border-red-700;
+  @apply dark:bg-red-500 dark:text-white dark:border-red-600;
+  @apply dark:hover:bg-red-600 dark:hover:border-red-700;
+  @apply dark:active:bg-red-700;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.26), inset 0 -1px 1px 0 rgb(0 0 0 / 0.16);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
 }
 
 @utility btn-input {
   @apply inline-flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium leading-5 select-none cursor-pointer;
-  @apply transition-[background-color,color,border-color] duration-150 border;
+  @apply transition-[background-color,color,border-color,box-shadow] duration-150 border;
   @apply bg-zinc-100 text-zinc-600 border-zinc-100;
   @apply hover:bg-zinc-200/70 hover:text-zinc-800 hover:border-zinc-200/70;
   @apply active:bg-zinc-200;
   @apply focus-visible:outline-none focus-visible:bg-white focus-visible:border-blue-400;
+  @apply focus-ui;
   @apply dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-800;
   @apply dark:hover:bg-zinc-700 dark:hover:text-zinc-100 dark:hover:border-zinc-700;
   @apply dark:active:bg-zinc-700;
   @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-blue-400;
   @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+  box-shadow: var(--theme-bevel-top), var(--theme-bevel-bottom);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
+  &:disabled {
+    box-shadow: none;
+  }
+}
+
+/* Recessed sibling of `btn-input`. Same filled surface + hover / focus /
+   disabled states, but sunk in (inset recess) instead of raised (bevel) — for
+   select / dropdown / picker triggers that should read as form fields rather
+   than press-buttons. Sinks deeper on :active. Compose with `btn-input-sm/-md`
+   for sizing, like `btn-input`. */
+@utility btn-input-recessed {
+  @apply btn-input;
+  box-shadow: var(--theme-recess);
+  &:active {
+    box-shadow: var(--theme-press);
+  }
+  &:disabled {
+    box-shadow: none;
+  }
 }
 
 @utility btn-input-sm {
@@ -98,6 +146,44 @@
   @apply dark:hover:bg-blue-900 dark:hover:border-blue-700;
 }
 
+@utility btn-segment {
+  @apply inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg border border-zinc-300/50 bg-zinc-100/55 px-2.5 py-1 text-xs font-medium leading-4 text-zinc-700 select-none;
+  @apply transition-[background-color,color,border-color] duration-150 ease-out;
+  @apply hover:bg-zinc-50/65 hover:text-zinc-900;
+  @apply active:bg-zinc-200/80;
+  @apply focus-ui;
+  @apply dark:border-zinc-700/50 dark:bg-zinc-900/50 dark:text-zinc-500;
+  @apply dark:hover:bg-zinc-800/35 dark:hover:text-zinc-300;
+  @apply dark:active:bg-zinc-800/95;
+  @apply disabled:pointer-events-none disabled:opacity-50;
+}
+
+@utility btn-segment-icon {
+  @apply btn-segment h-7 w-7 px-0;
+}
+
+@utility btn-input-primary {
+  @apply btn-input bg-white text-blue-600 border-blue-400;
+  @apply hover:bg-blue-50 hover:text-blue-700 hover:border-blue-500;
+  @apply active:bg-blue-100 active:border-blue-500;
+  @apply focus-visible:bg-white focus-visible:border-blue-500;
+  @apply dark:bg-transparent dark:text-blue-400 dark:border-blue-400;
+  @apply dark:hover:bg-blue-950 dark:hover:text-blue-300 dark:hover:border-blue-400;
+  @apply dark:active:bg-blue-900;
+  @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-blue-400;
+}
+
+@utility btn-input-success {
+  @apply btn-input bg-white text-emerald-600 border-emerald-400;
+  @apply hover:bg-emerald-50 hover:text-emerald-700 hover:border-emerald-500;
+  @apply active:bg-emerald-100 active:border-emerald-500;
+  @apply focus-visible:bg-white focus-visible:border-emerald-500;
+  @apply dark:bg-transparent dark:text-emerald-400 dark:border-emerald-400;
+  @apply dark:hover:bg-emerald-950 dark:hover:text-emerald-300 dark:hover:border-emerald-400;
+  @apply dark:active:bg-emerald-900;
+  @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-emerald-400;
+}
+
 /* Input: grey bg + matching border unfocused, white bg + blue border on focus */
 @utility input {
   padding: var(--theme-input-py) var(--theme-input-px);
@@ -110,6 +196,12 @@
   @apply dark:focus:!bg-zinc-900 dark:focus:!border-blue-400 dark:focus-within:!bg-zinc-900 dark:focus-within:!border-blue-400;
   @apply disabled:bg-zinc-50 disabled:text-zinc-400 disabled:border-zinc-50 disabled:cursor-not-allowed;
   @apply dark:disabled:bg-zinc-900 dark:disabled:text-zinc-500 dark:disabled:border-zinc-900;
+  @apply transition-[background-color,border-color,box-shadow] duration-150;
+  /* Recessed well (clip-safe). Stays recessed on focus while bg→white + blue border. */
+  box-shadow: var(--theme-recess);
+  &:disabled {
+    box-shadow: none;
+  }
 }
 
 @utility icon-btn {
@@ -119,7 +211,21 @@
   @apply bg-transparent border-0 shadow-none;
   @apply hover:text-zinc-700 hover:bg-zinc-100;
   @apply dark:hover:text-zinc-200 dark:hover:bg-zinc-800;
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950;
+  @apply focus-ui;
   @apply active:bg-zinc-200 dark:active:bg-zinc-700;
   @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
 }
+
+/* Active / pressed state — set `aria-pressed="true"` on an `icon-btn`
+   to mark it as the currently-selected option (active filter, toggled
+   toolbar mode, etc.). Same blue tint as the markdown-editor toolbar's
+   active state so the platform reads consistently for "this is on". */
+.icon-btn[aria-pressed="true"] {
+  @apply text-blue-600 bg-blue-50;
+  @apply dark:text-blue-400 dark:bg-blue-950/40;
+}
+
+.icon-btn[aria-pressed="true"]:hover {
+  @apply bg-blue-100 text-blue-700;
+  @apply dark:bg-blue-900/40 dark:text-blue-300;
+}

package/src/styles/utilities-code-display.css

@@ -0,0 +1,67 @@
+/* Token classes emitted by `CodeDisplay`.
+   Small, dependency-free highlighting for examples and docs. */
+.code-display-code,
+.code-display-code * {
+  font-family: var(--font-mono);
+}
+
+.cd-c { @apply text-zinc-500 italic; }
+.cd-s { @apply text-blue-900 dark:text-blue-200; }
+.cd-n { @apply text-blue-700 dark:text-blue-300; }
+.cd-k { @apply text-red-700 dark:text-red-400; }
+.cd-p { @apply text-green-800 dark:text-green-300; }
+.cd-a { @apply text-blue-700 dark:text-blue-300; }
+.cd-f { @apply text-purple-700 dark:text-purple-300; }
+
+.cd-md-syntax { @apply text-blue-700 dark:text-blue-300; }
+.cd-md-checkbox { @apply text-blue-700 dark:text-blue-300; }
+.cd-md-directive { @apply text-purple-700 dark:text-purple-300; }
+.cd-md-ref { @apply text-blue-700 dark:text-blue-300; }
+.cd-md-link { @apply text-blue-700 dark:text-blue-300; }
+.cd-md-tag { @apply text-emerald-700 dark:text-emerald-300; }
+.cd-md-code { @apply text-purple-700 dark:text-purple-300; }
+.cd-md-formula { @apply text-amber-700 dark:text-amber-300; }
+
+/* Shared in-product documentation blocks. `DocCode` accepts a custom
+   highlighter, usually from @valentinkolb/stdlib highlight.compile. */
+.doc-code {
+  background: #f6f8fa;
+  border: 1px solid rgb(208 215 222 / 0.55);
+  box-shadow: 0 1px 2px rgb(31 35 40 / 0.04);
+  color: #24292f;
+}
+
+.dark .doc-code {
+  background: #0d1117;
+  border-color: rgb(48 54 61 / 0.7);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.24);
+  color: #e6edf3;
+}
+
+.doc-code,
+.doc-code * {
+  font-family: var(--font-mono);
+}
+
+.doc-token-comment { @apply text-zinc-500 italic; }
+.doc-token-keyword { color: #0969da; font-weight: 700; }
+.doc-token-aggregation,
+.doc-token-function { color: #116329; font-weight: 700; }
+.doc-token-duration,
+.doc-token-number,
+.doc-token-uuid { color: #8250df; }
+.doc-token-string { color: #953800; }
+.doc-token-placeholder { color: #64748b; font-style: italic; }
+.doc-token-operator { color: #64748b; font-weight: 700; }
+.doc-token-path,
+.doc-token-identifier { color: inherit; }
+
+.dark .doc-token-keyword { color: #79c0ff; }
+.dark .doc-token-aggregation,
+.dark .doc-token-function { color: #7ee787; }
+.dark .doc-token-duration,
+.dark .doc-token-number,
+.dark .doc-token-uuid { color: #d2a8ff; }
+.dark .doc-token-string { color: #ffa657; }
+.dark .doc-token-placeholder { color: #94a3b8; }
+.dark .doc-token-operator { color: #94a3b8; }

package/src/styles/utilities-completion.css

@@ -0,0 +1,223 @@
+/* Generic completion overlay styles — used by both MarkdownEditor's
+   in-flow preview and the standalone AutocompleteEditor. Classes
+   are markdown-agnostic (`completion-*`, not `md-*`) so they apply
+   wherever the overlay pattern is used.
+
+   IMPORTANT: these styles sit inline with editor text in editors
+   that use the overtype (mirror-textarea) pattern, so glyph metrics
+   MUST be width-safe. The ghost-arrow span is allowed to deviate
+   (it's AFTER the caret, doesn't affect cursor alignment for typed
+   content). */
+
+/* Ghost completion preview — zinc-400 tail at the cursor showing
+   the not-yet-typed continuation of the active suggestion. No
+   background — feels like a literal suggestion hovering in text,
+   not a separate UI element. */
+.completion-ghost {
+  @apply text-zinc-400 dark:text-zinc-500;
+}
+
+/* Invisible caret anchor — injected at the cursor when a dropdown
+   is open but no ghost is shown (e.g. typed text equals the
+   highlighted row). Provides a measurable bounding rect for
+   `getBoundingClientRect()` without shifting any layout. */
+.completion-caret-anchor {
+  display: inline-block;
+  width: 0;
+  height: 1em;
+  vertical-align: text-bottom;
+  pointer-events: none;
+}
+
+/* "Press Tab" arrow rendered after the ghost tail. Slightly larger
+   than body text so the hint is readable. Doesn't perturb cursor
+   alignment because it sits AFTER the caret position. */
+.completion-ghost-arrow {
+  @apply text-zinc-400 dark:text-zinc-500;
+  margin-left: 0.4rem;
+  font-size: 1.15em;
+  line-height: 1;
+}
+
+/* ── AutocompleteEditor styles ─────────────────────────────────
+
+   Generic editor with optional syntax-highlighting overlay. When the
+   caller passes `highlight`, the textarea becomes invisible-text-only
+   and a preview layer beneath it renders the highlighted HTML
+   (overtype pattern). When no `highlight` is given, the textarea is
+   plain visible and the preview layer is omitted. */
+
+.ac-editor {
+  position: relative;
+  @apply rounded-md border;
+  @apply bg-zinc-100 border-zinc-100;
+  @apply hover:bg-zinc-200/70 hover:border-zinc-200/70;
+  @apply dark:bg-zinc-800 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:border-zinc-700;
+  @apply transition-colors;
+  @apply overflow-hidden;
+  /* Recessed well — same inset as the `input` utility (this editor mirrors its
+     colours, so it gets its depth too). The recess persists on focus. */
+  box-shadow: var(--theme-recess);
+}
+
+.ac-editor:focus-within {
+  @apply bg-white border-blue-400;
+  @apply dark:bg-zinc-900 dark:border-blue-400;
+}
+
+.ac-editor[data-variant="paper"] {
+  @apply rounded-lg;
+  @apply bg-white border-zinc-100;
+  @apply hover:bg-white hover:border-zinc-100;
+  @apply dark:bg-zinc-900 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-900 dark:hover:border-zinc-800;
+  box-shadow: var(--theme-shadow-elevated);
+}
+
+.ac-editor[data-variant="paper"]:focus-within {
+  @apply bg-white border-blue-400;
+  @apply dark:bg-zinc-900 dark:border-blue-400;
+}
+
+.ac-editor[data-disabled="true"] {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.ac-editor[data-error="true"],
+.ac-editor[data-error="true"]:focus-within {
+  @apply border-red-400 dark:border-red-500;
+}
+
+.ac-editor[data-fill="true"] {
+  height: 100%;
+  min-height: 0;
+}
+
+.ac-editor-surface {
+  position: relative;
+  height: var(--ac-h, 4.5rem);
+}
+
+.ac-editor-placeholder {
+  position: absolute;
+  inset: 0;
+  padding: 0.5rem 0.75rem;
+  pointer-events: none;
+  user-select: none;
+  @apply text-zinc-400 dark:text-zinc-500;
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  z-index: 1;
+}
+
+.ac-editor-layer {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  border: 0 !important;
+  outline: 0 !important;
+  resize: none !important;
+  padding: 0.5rem 0.75rem !important;
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5 !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  letter-spacing: 0 !important;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  background: transparent !important;
+  font-synthesis: none !important;
+  font-variant-ligatures: none !important;
+}
+
+.ac-editor-input {
+  @apply text-zinc-900 dark:text-zinc-100;
+  overflow-y: auto !important;
+  z-index: 2 !important;
+  /* Default visible textarea — caret-color inherits from text color */
+}
+
+/* Overlay mode: textarea text invisible, only caret + selection
+   show through. The preview underneath provides the visible glyphs. */
+.ac-editor-input--overlay {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
+  caret-color: #18181b !important;
+  background: transparent !important;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.dark .ac-editor-input--overlay {
+  caret-color: #f4f4f5 !important;
+}
+
+.ac-editor-input--overlay::selection {
+  background: rgb(59 130 246 / 0.35);
+  color: transparent;
+}
+
+.ac-editor-preview {
+  z-index: 1 !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  overflow-y: scroll !important;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  @apply text-zinc-900 dark:text-zinc-100;
+}
+
+/* Force every descendant (every span emitted by the user's
+   `highlight` callback) to inherit the layer's typography exactly.
+   Without this, a syntax-highlighter span can pick up a slightly
+   different font-family / font-size / letter-spacing from a Tailwind
+   reset, a UA default, or any cascading rule — accumulating into
+   a visible cursor-vs-glyph offset (the classic overtype drift).
+   `display: inline` + zero margins/padding/border guarantee no box
+   tweaks shift positions either. Same rule pattern as the
+   MarkdownEditor preview. */
+.ac-editor-preview *,
+.ac-editor-preview *::before,
+.ac-editor-preview *::after {
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  font-stretch: inherit !important;
+  letter-spacing: inherit !important;
+  word-spacing: inherit !important;
+  font-weight: inherit !important;
+  font-style: inherit !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  text-indent: 0 !important;
+  vertical-align: baseline !important;
+  display: inline !important;
+}
+
+.ac-editor-preview .fn {
+  @apply text-blue-600 dark:text-blue-300;
+}
+.ac-editor-preview .field {
+  @apply text-emerald-700 dark:text-emerald-300;
+}
+.ac-editor-preview .num {
+  @apply text-violet-700 dark:text-violet-300;
+}
+.ac-editor-preview .str {
+  @apply text-amber-700 dark:text-amber-300;
+}
+.ac-editor-preview .op {
+  @apply text-zinc-500 dark:text-zinc-400;
+}
+
+.ac-editor-preview::-webkit-scrollbar-thumb,
+.ac-editor-input--overlay::-webkit-scrollbar-thumb {
+  background: transparent;
+}

package/src/styles/utilities-detail.css

@@ -0,0 +1,73 @@
+/* Detail panels — flow layout for info-dense detail surfaces.
+
+   Convention: the scrolling parent is `detail-stack`; every logical group is a
+   `detail-section`. The stack owns inter-section spacing, sections own their
+   inner padding and surface treatment. Empty sections must not render at all
+   (use Show / conditional rendering) so sparse records do not produce empty
+   shells. */
+
+@utility detail-stack {
+  @apply flex h-full min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
+}
+
+@utility detail-section {
+  /* Each section is its own surface card. The parent `detail-stack` owns
+     section-to-section spacing so callers do not mix margins and flex gaps. */
+  @apply paper p-4;
+  & > .detail-section-label + * {
+    @apply pt-0 mt-0;
+  }
+}
+
+@utility detail-section-compact {
+  @apply paper p-3;
+  & > .detail-section-label + * {
+    @apply pt-0 mt-0;
+  }
+}
+
+@utility detail-section-label {
+  /* Mini-header that anchors a section visually, e.g. "REACH", "WORK".
+     Stronger than `section-label` because there is no horizontal rule between
+     sections — the label has to do the delineation work on its own. */
+  @apply mb-3 text-xs font-semibold uppercase tracking-wider text-secondary select-none;
+}
+
+@utility detail-row {
+  /* Single-line row for emails, phones, websites, simple facts. Compose with
+     `detail-row-icon` on the leading icon and `detail-row-label` on the
+     optional small label slot. */
+  @apply flex items-baseline gap-1.5 py-1.5 text-xs text-primary;
+}
+
+@utility detail-row-icon {
+  /* Fixed-width icon slot for `detail-row` — keeps values aligned across rows.
+     Add a color utility (`text-blue-500`, `text-amber-500`, …) to colorize
+     per data type. */
+  @apply shrink-0 w-4 text-sm text-center self-center;
+}
+
+@utility detail-row-label {
+  /* Optional small label between icon and value, e.g. "work", "private". */
+  @apply shrink-0 w-24 truncate text-dimmed;
+}
+
+@utility detail-facts {
+  /* Compact key/value grid for facts without per-row icons (e.g. PERSONAL,
+     WORK groups). Children pair up: `detail-fact-key` then value. Each row is
+     separated by a hairline so the eye can follow key → value across the gap. */
+  @apply grid grid-cols-[8rem_1fr] gap-x-4 text-xs text-primary;
+  & > * {
+    @apply py-1.5 border-b border-zinc-100 dark:border-zinc-900;
+  }
+  & > *:nth-last-child(-n+2) {
+    @apply border-b-0 pb-0;
+  }
+  & > *:nth-child(-n+2) {
+    @apply pt-0;
+  }
+}
+
+@utility detail-fact-key {
+  @apply text-dimmed;
+}

package/src/styles/utilities-feedback.css

@@ -1,6 +1,15 @@
 /* Feedback blocks, badges, and chips — flat, solid, border-based */
 @utility info-block {
   @apply rounded-lg border px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.46),
+    inset 0 -1px 0 rgb(0 0 0 / 0.025);
+}
+
+.dark .info-block {
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.045),
+    inset 0 -1px 0 rgb(0 0 0 / 0.28);
 }
 
 @utility info-block-note {
@@ -41,25 +50,17 @@
 }
 
 @utility popup {
-  @apply rounded-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-lg text-zinc-900 dark:text-zinc-100;
+  @apply rounded-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-zinc-100;
+  /* Floating layer (portaled) — outer shadow is fine here. */
+  box-shadow: var(--theme-shadow-float);
 }
 
 @utility tag {
   @apply rounded inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium;
 }
 
-/* Stat cards — markup-only convention, see
+/* Stat cards are component-owned by StatGrid/StatCell. See
    `skills/cloud-app/references/frontend.md` § Stats and the live demos in
-   `packages/ui-lab/src/frontend/UiLabShowcase.island.tsx`. Pattern:
-     <div class="paper overflow-hidden">
-       <div class="grid grid-cols-N gap-px p-px bg-zinc-100 dark:bg-zinc-800">
-         <div class="bg-white dark:bg-zinc-900 px-4 py-4 flex flex-col gap-0.5">
-           <span class="text-[10px] uppercase tracking-wider text-dimmed">Label</span>
-           <span class="text-xl font-bold tabular-nums text-primary">Value</span>
-           <span class="text-[10px] text-dimmed">Sub</span>
-         </div>
-       </div>
-     </div>
-   The earlier `.stat-grid / .stat-cell / .stat-value / .stat-label / .stat-sub`
-   utilities used `divide-x` + centered cells — DO NOT reintroduce. They
-   produced double borders at corners and missing borders on edges. */
+   `packages/ui-lab/src/frontend/lab/surfaces-cards.tsx`. Do not reintroduce
+   the earlier `.stat-grid / .stat-cell / .stat-value / .stat-label / .stat-sub`
+   utilities; app code should import the shared components instead. */