@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/controls-overlay.css

@@ -0,0 +1,603 @@
+/* ==========================================================================
+   @digithings-ai/ui — behavioral controls CSS (styles/controls-overlay.css).
+
+   The legacy controls layer (`components/controls/*`, #1419) was retired in
+   batch K3 (#4306); the kit's own parts emit `kit-pop` and utility classes, so
+   this sheet is now historical overhang kept in place while it is proven dead.
+   Skin + state machinery for the @base-ui/react-backed controls: DropdownMenu,
+   Sheet, Tooltip (Collapsible is an unstyled passthrough and needs no CSS).
+   Import AFTER the token bridge, in the app's globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/controls-overlay.css";
+     @source "<path-to>/packages/ui/src/components/controls";
+   The @source line is load-bearing (MIGRATION.md rule 3): the components carry
+   token-backed utilities and Tailwind does not scan package sources on its own.
+
+   Layering is deliberate and load-bearing:
+   - `@layer components` blocks hold every DEFAULT that a digichat call site
+     overrides via className (pane width, fonts, colors, shadows). digichat's
+     old ui/* wrappers relied on tailwind-merge to resolve base-vs-call-site
+     utility conflicts; @digithings-ai/ui has no tailwind-merge, so the base
+     dress sits in the `components` layer where the app's `utilities` layer
+     deterministically wins.
+   - Unlayered rules hold everything that must keep BEATING plain call-site
+     utilities: state machinery (popup enter/exit keyframes, sheet slide
+     transforms, backdrop blur, reduced-motion kill-switches) AND the sheet
+     per-side geometry, whose old data-[side=…]: variants compiled to
+     (0,2,0) selectors that out-ranked call-site w-full/max-w-* utilities
+     (see the note at the geometry block).
+
+   Compat target (binding, E3 lesson): the DEFAULT skin reproduces digichat's
+   current rendered look exactly, translated to canon tokens per digichat's
+   own reverse bridge (#1403): popover→surface, foreground→ink,
+   muted-foreground→ink-soft, muted→surface-2, border→hair, destructive→down,
+   background→bg, accent-foreground→ink, ring→var(--ring, --accent).
+   Reference-vs-digichat deltas (for a later product ruling) live behind the
+   opt-in `skin="reference"` classes (.ctl-menu-pane--ref / .ctl-tip--ref),
+   which wear the reference controls-family dd-menu / tt-bubble grammar.
+   Known digichat-canon deltas kept as-is on purpose:
+   - menu focus text is ink-on-accent (digichat's --accent-foreground: ink),
+     not the canon --on-accent pairing;
+   - the sheet scrim is bg-bg/10 + blur, not the canon bg-black/NN dim layer;
+   - radius utilities (rounded-lg/md/sm) resolve to digichat's --radius scale
+     (10/8/6px-ish) inside digichat and to Tailwind defaults elsewhere.
+   ========================================================================== */
+
+/* ── popup enter/exit (DropdownMenu + Tooltip) ────────────────────────────
+   Replaces tw-animate-css's animate-in/out + fade/zoom/slide-from-side chain
+   (fade from 0, zoom from .95, 0.5rem slide toward the anchor). Base UI keeps
+   the popup mounted while [data-closed] animates, then unmounts on
+   animationend. transform-origin comes from the origin-(--transform-origin)
+   utility on the popup. */
+.ctl-pop {
+  --ctl-pop-dur: 0.15s;
+  --ctl-slide-x: 0rem;
+  --ctl-slide-y: 0rem;
+}
+
+/* digichat's menu popup carried duration-100; tooltips keep the 150ms default */
+.ctl-pop.ctl-menu-pane {
+  --ctl-pop-dur: 0.1s;
+}
+
+.ctl-pop[data-side="bottom"] {
+  --ctl-slide-y: -0.5rem;
+}
+.ctl-pop[data-side="top"] {
+  --ctl-slide-y: 0.5rem;
+}
+.ctl-pop[data-side="left"],
+.ctl-pop[data-side="inline-start"] {
+  --ctl-slide-x: 0.5rem;
+}
+.ctl-pop[data-side="right"],
+.ctl-pop[data-side="inline-end"] {
+  --ctl-slide-x: -0.5rem;
+}
+
+.ctl-pop[data-open] {
+  animation: ctl-pop-in var(--ctl-pop-dur) ease;
+}
+
+.ctl-pop[data-closed] {
+  animation: ctl-pop-out var(--ctl-pop-dur) ease forwards;
+}
+
+@keyframes ctl-pop-in {
+  from {
+    opacity: 0;
+    transform: translate(var(--ctl-slide-x), var(--ctl-slide-y)) scale(0.95);
+  }
+}
+
+@keyframes ctl-pop-out {
+  to {
+    opacity: 0;
+    transform: translate(var(--ctl-slide-x), var(--ctl-slide-y)) scale(0.95);
+  }
+}
+
+/* ── dropdown menu ───────────────────────────────────────────────────── */
+
+@layer components {
+  .ctl-menu-pane {
+    /* component tokens — menu pane geometry */
+    --ctl-menu-min: 8rem;
+    --ctl-menu-icon: 1rem;
+    --ctl-menu-ref-font: 0.8rem;
+
+    width: var(--anchor-width);
+    min-width: var(--ctl-menu-min);
+    max-height: var(--available-height);
+    background: var(--surface);
+    color: var(--ink);
+    /* ring-1 ring-ink/10 composed with shadow-md — split utilities would
+       clobber each other's box-shadow, so the pair lives here */
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent),
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+
+  /* submenu pane: auto width + the heavier shadow-lg read */
+  .ctl-menu-pane--sub {
+    --ctl-menu-sub-min: 96px;
+
+    width: auto;
+    min-width: var(--ctl-menu-sub-min);
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent),
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  /* Base UI highlights items with real focus (roving tabindex) — :focus is
+     the highlight state, exactly as digichat's focus: utilities keyed it. */
+  .ctl-menu-item:focus {
+    background: var(--accent);
+    color: var(--ink);
+  }
+
+  /* digichat forced every descendant (icons) to the focus foreground */
+  .ctl-menu-item:not([data-variant="destructive"]):focus * {
+    color: var(--ink);
+  }
+
+  .ctl-menu-item[data-variant="destructive"] {
+    color: var(--danger);
+  }
+
+  .ctl-menu-item[data-variant="destructive"]:focus {
+    background: color-mix(in oklab, var(--danger) 10%, transparent);
+    color: var(--danger);
+  }
+
+  [data-theme="dark"] .ctl-menu-item[data-variant="destructive"]:focus {
+    background: color-mix(in oklab, var(--danger) 20%, transparent);
+  }
+
+  .ctl-menu-item[data-variant="destructive"] svg {
+    color: var(--danger);
+  }
+
+  .ctl-menu-item svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  /* unsized icons get the size-4 read; explicit size-* utilities win */
+  .ctl-menu-item svg:not([class*="size-"]) {
+    width: var(--ctl-menu-icon, 1rem);
+    height: var(--ctl-menu-icon, 1rem);
+  }
+
+  .ctl-menu-item:focus .ctl-menu-shortcut {
+    color: var(--ink);
+  }
+
+  /* an open submenu keeps its trigger highlighted */
+  .ctl-menu-subtrigger[data-popup-open],
+  .ctl-menu-subtrigger[data-open] {
+    background: var(--accent);
+    color: var(--ink);
+  }
+
+  /* — reference skin (opt-in, skin="reference") — the controls-family
+       dd-menu grammar: hair border, 12px radius, surface-mixed pane, mono
+       type, accent-tinted highlight. Kept behind a variant so thin digichat
+       re-exports do not change its rendered look (E3 ruling). */
+  .ctl-menu-pane--ref {
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
+    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
+    font-family: var(--font-mono);
+  }
+
+  .ctl-menu-pane--ref .ctl-menu-item {
+    color: var(--ink-soft);
+    font-size: var(--ctl-menu-ref-font, 0.8rem);
+  }
+
+  .ctl-menu-pane--ref .ctl-menu-item:focus,
+  .ctl-menu-pane--ref .ctl-menu-subtrigger[data-popup-open],
+  .ctl-menu-pane--ref .ctl-menu-subtrigger[data-open] {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    color: var(--ink);
+  }
+
+  .ctl-menu-pane--ref .ctl-menu-item:not([data-variant="destructive"]):focus * {
+    color: var(--ink);
+  }
+}
+
+/* ── tooltip ─────────────────────────────────────────────────────────── */
+
+@layer components {
+  /* default skin: digichat's inverted bubble (ink on bg) */
+  .ctl-tip {
+    /* component tokens — tooltip skin geometry */
+    --ctl-tip-kbd-pad: 0.375rem;
+
+    background: var(--ink);
+    color: var(--bg);
+  }
+
+  /* kbd affordance carried over from digichat's bubble */
+  .ctl-tip:has([data-slot="kbd"]) {
+    padding-inline-end: var(--ctl-tip-kbd-pad);
+  }
+
+  .ctl-tip [data-slot="kbd"] {
+    position: relative;
+    isolation: isolate;
+    z-index: 50;
+    border-radius: 0;
+  }
+
+  .ctl-tip-arrow {
+    --ctl-tip-arrow: 0.625rem;
+    --ctl-tip-arrow-offset: 0.25rem;
+
+    width: var(--ctl-tip-arrow);
+    height: var(--ctl-tip-arrow);
+    translate: 0 calc(-50% - 2px);
+    rotate: 45deg;
+    border-radius: 0;
+    background: var(--ink);
+    fill: var(--ink);
+  }
+
+  /* — reference skin (opt-in, skin="reference") — the tt-bubble grammar:
+       surface pane, hair border, mono type, bordered arrow. */
+  .ctl-tip--ref {
+    --ctl-tip-ref-font: 0.7rem;
+
+    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
+    color: var(--ink);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
+    font-family: var(--font-mono);
+    font-size: var(--ctl-tip-ref-font, 0.7rem);
+    line-height: 1.45;
+  }
+
+  .ctl-tip--ref .ctl-tip-arrow {
+    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
+    fill: none;
+    border-radius: 0;
+    border-style: solid;
+    border-color: var(--hair);
+    border-width: 0;
+  }
+
+  .ctl-tip--ref .ctl-tip-arrow[data-side="top"] {
+    border-width: 0 1px 1px 0;
+  }
+
+  .ctl-tip--ref .ctl-tip-arrow[data-side="bottom"] {
+    border-width: 1px 0 0 1px;
+  }
+
+  .ctl-tip--ref .ctl-tip-arrow[data-side="left"],
+  .ctl-tip--ref .ctl-tip-arrow[data-side="inline-start"] {
+    border-width: 0 0 1px 1px;
+  }
+
+  .ctl-tip--ref .ctl-tip-arrow[data-side="right"],
+  .ctl-tip--ref .ctl-tip-arrow[data-side="inline-end"] {
+    border-width: 1px 1px 0 0;
+  }
+}
+
+/* arrow placement — ports digichat's per-side offsets; !important beats the
+   inline top/left Base UI writes while positioning the arrow */
+.ctl-tip-arrow[data-side="top"] {
+  bottom: calc(-1 * var(--ctl-tip-arrow, 0.625rem));
+}
+
+.ctl-tip-arrow[data-side="bottom"] {
+  top: var(--ctl-tip-arrow-offset, 0.25rem);
+}
+
+/* `left`/`right` are physical placements (the arrow sits on the opposite,
+   physical edge); `inline-start`/`inline-end` are logical and mirror. */
+.ctl-tip-arrow[data-side="left"] {
+  top: 50% !important;
+  right: calc(-1 * var(--ctl-tip-arrow-offset, 0.25rem));
+  translate: 0 -50%;
+}
+
+.ctl-tip-arrow[data-side="inline-start"] {
+  top: 50% !important;
+  inset-inline-end: calc(-1 * var(--ctl-tip-arrow-offset, 0.25rem));
+  translate: 0 -50%;
+}
+
+.ctl-tip-arrow[data-side="right"] {
+  top: 50% !important;
+  left: calc(-1 * var(--ctl-tip-arrow-offset, 0.25rem));
+  translate: 0 -50%;
+}
+
+.ctl-tip-arrow[data-side="inline-end"] {
+  top: 50% !important;
+  inset-inline-start: calc(-1 * var(--ctl-tip-arrow-offset, 0.25rem));
+  translate: 0 -50%;
+}
+
+/* ── DatePager calendar (nb-cal) — glass / term-bg month grid ─────────── */
+
+@layer components {
+  .nb-cal {
+    /* component tokens — calendar geometry */
+    --nb-cal-w: 17.5rem;
+    --nb-cal-pad: 0.75rem;
+    --nb-cal-nav: 1.75rem;
+    --nb-cal-gap: 0.15rem;
+
+    width: var(--nb-cal-w);
+    padding: var(--nb-cal-pad);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: color-mix(in oklab, var(--term-bg) 92%, var(--surface));
+    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
+    font-family: var(--font-mono);
+    color: var(--ink);
+  }
+
+  .nb-cal-head {
+    display: grid;
+    grid-template-columns: var(--nb-cal-nav, 1.75rem) 1fr var(--nb-cal-nav, 1.75rem);
+    align-items: center;
+    gap: 0.35rem;
+    margin-bottom: 0.65rem;
+  }
+
+  .nb-cal-title {
+    text-align: center;
+    font-size: var(--type-meta);
+    font-weight: 500;
+    color: var(--ink);
+    letter-spacing: 0.01em;
+  }
+
+  .nb-cal-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nb-cal-nav, 1.75rem);
+    height: var(--nb-cal-nav, 1.75rem);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-mute);
+    cursor: pointer;
+    transition:
+      color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .nb-cal-nav:hover:not(:disabled) {
+    color: var(--ink);
+    background: color-mix(in oklab, var(--ink) 6%, transparent);
+  }
+
+  .nb-cal-nav:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .nb-cal-weekdays,
+  .nb-cal-row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--nb-cal-gap, 0.15rem);
+  }
+
+  .nb-cal-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nb-cal-gap, 0.15rem);
+  }
+
+  .nb-cal-weekday {
+    --nb-cal-weekday-h: 1.35rem;
+    --nb-cal-weekday-font: 0.62rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--nb-cal-weekday-h, 1.35rem);
+    font-size: var(--nb-cal-weekday-font, 0.62rem);
+    color: var(--ink-mute);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .nb-cal-day {
+    --nb-cal-day-font: 0.72rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-soft);
+    font: inherit;
+    font-size: var(--nb-cal-day-font, 0.72rem);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition:
+      color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .nb-cal-day:hover:not(:disabled):not(.nb-cal-day--selected) {
+    color: var(--ink);
+    background: color-mix(in oklab, var(--ink) 6%, transparent);
+  }
+
+  .nb-cal-day--selected {
+    color: var(--accent);
+    background: color-mix(in oklab, var(--accent) 20%, transparent);
+    border-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  }
+
+  .nb-cal-day--muted,
+  .nb-cal-day:disabled {
+    color: var(--ink-mute);
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  .nb-cal-day--empty {
+    pointer-events: none;
+    visibility: hidden;
+  }
+}
+
+/* ── dialog — the centered modal (components/controls/Dialog.tsx) ─────────
+   Canon dress directly (no digichat look to reproduce): radius 0, hairline,
+   --surface panel, canon black dim scrim. The card reuses the shared .ctl-pop
+   enter/exit above; the X is the sheet's borderless glyph grammar. */
+@layer components {
+  .ctl-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background: rgb(0 0 0 / 0.5);
+    transition: opacity 0.15s ease;
+  }
+
+  .ctl-dialog-popup {
+    --ctl-dialog-gutter: 1rem;
+
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: grid;
+    place-items: center;
+    padding: var(--ctl-dialog-gutter);
+    pointer-events: none;
+  }
+
+  .ctl-dialog-card {
+    --ctl-dialog-desc-font: 0.85rem;
+    --ctl-dialog-desc-top: 0.4rem;
+    --ctl-dialog-footer-gap: 0.6rem;
+    --ctl-dialog-x-icon: 1rem;
+    --ctl-dialog-max: 28rem;
+    --ctl-dialog-pad-block: 1.4rem;
+    --ctl-dialog-pad-inline: 1.5rem;
+
+    position: relative;
+    pointer-events: auto;
+    width: 100%;
+    max-width: var(--ctl-dialog-max);
+    background: var(--surface);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    padding: var(--ctl-dialog-pad-block) var(--ctl-dialog-pad-inline);
+  }
+
+  .ctl-dialog-title {
+    --ctl-dialog-title-pad: 2rem;
+
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: var(--type-body);
+    color: var(--ink);
+    margin: 0;
+    padding-inline-end: var(--ctl-dialog-title-pad, 2rem);
+  }
+
+  .ctl-dialog-description {
+    color: var(--ink-soft);
+    font-size: var(--ctl-dialog-desc-font, 0.85rem);
+    line-height: 1.6;
+    margin: var(--ctl-dialog-desc-top, 0.4rem) 0 0;
+  }
+
+  .ctl-dialog-header {
+    margin-bottom: 0.2rem;
+  }
+
+  .ctl-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: var(--ctl-dialog-footer-gap, 0.6rem);
+    margin-top: var(--ctl-dialog-pad-block, 1.4rem);
+  }
+
+  .ctl-dialog-x {
+    --ctl-dialog-x-inset: 0.7rem;
+    --ctl-dialog-x-size: 1.75rem;
+
+    position: absolute;
+    top: var(--ctl-dialog-x-inset);
+    inset-inline-end: var(--ctl-dialog-x-inset);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ctl-dialog-x-size);
+    height: var(--ctl-dialog-x-size);
+    border: 1px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-soft);
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .ctl-dialog-x svg {
+    width: var(--ctl-dialog-x-icon, 1rem);
+    height: var(--ctl-dialog-x-icon, 1rem);
+  }
+}
+
+
+/* ── states (unlayered: must beat call-site utilities) ── */
+
+  .ctl-dialog-overlay[data-starting-style],
+  .ctl-dialog-overlay[data-ending-style] {
+    opacity: 0;
+  }
+
+  .ctl-dialog-card[data-tone="danger"] .ctl-dialog-title {
+    color: var(--danger);
+  }
+
+  .ctl-dialog-x:hover {
+    color: var(--ink);
+  }
+
+.ctl-dialog-x:focus-visible {
+  outline: none;
+  color: var(--ink);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+/* ── reduced motion: no travel, instant states ───────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .ctl-pop[data-open],
+  .ctl-pop[data-closed] {
+    animation: none;
+  }
+
+  .ctl-dialog-overlay {
+    transition: none;
+  }
+}