portal-mojo 0.2.7 → 0.2.9

package/src/styles/components/datetimepicker.css

@@ -0,0 +1,230 @@
+/* ======================================================== DateTimePicker
+   Layout glue for portal-mojo <DateTimePicker>
+   (packages/portal-mojo/src/ui/date/DateTimePicker.tsx). Ported from the
+   `.mojo-datetime-*` block of web-mojo calendar.css; Bootstrap vars map onto
+   theme.css tokens (--bs-secondary-color→--mute, --bs-border-color→--line,
+   --bs-tertiary-bg→--surface, --bs-primary→--accent, --bs-danger→--bad).
+
+   Deliberately thin: theme/calendar.css already styles the grid,
+   theme/timepicker.css the steppers, theme/combobox.css the zone picker and
+   theme/popover.css the floating shell. What lives here is the two-column
+   popover, the timezone row, the footer, and the trigger.
+
+   NOT imported by theme.css yet — the orchestrator adds
+   `@import "./theme/datetimepicker.css";` at merge. */
+
+.mojo-datetime-picker {
+    position: relative;      /* the clear ✕ is absolutely placed over the trigger */
+    display: inline-block;
+    width: 100%;
+}
+
+/* ── Trigger ──────────────────────────────────────────────────── */
+/* Same house control metrics as the Date/Time triggers so the three line up
+   in one form grid. */
+
+.mojo-datetime-trigger {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+    padding: 7px 10px;
+    background: var(--field-bg);
+    color: var(--ink-strong);
+    border: 1px solid var(--field-line);
+    border-radius: 8px;
+    font-size: 13.5px;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.mojo-datetime-trigger:hover:not(:disabled):not(.is-readonly) { border-color: var(--mute); }
+/* Focus ring on the WRAPPER so it also shows while the clear ✕ holds focus. */
+.mojo-datetime-picker:focus-within .mojo-datetime-trigger {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.mojo-datetime-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
+.mojo-datetime-trigger.is-readonly { cursor: default; }
+.mojo-datetime-trigger.is-invalid { border-color: var(--bad); }
+.mojo-datetime-trigger.has-clear { padding-right: 32px; }
+
+.mojo-datetime-trigger > i {
+    flex: none;
+    color: var(--mute);
+    font-size: 14.5px;
+}
+
+.mojo-datetime-trigger-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-feature-settings: "tnum" on;
+    font-variant-numeric: tabular-nums;
+}
+.mojo-datetime-trigger-text.is-empty { color: var(--mute); }
+
+/* Sibling of the trigger (nesting buttons is invalid HTML), overlaid on its
+   right edge; the wrapper carries the reveal so the pointer sitting on the ✕
+   keeps it visible. */
+.mojo-datetime-trigger-clear {
+    position: absolute;
+    top: 50%;
+    right: 5px;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    background: none;
+    border: 0;
+    border-radius: 50%;
+    color: var(--mute);
+    font-size: 11px;
+    line-height: 1;
+    cursor: pointer;
+}
+.mojo-datetime-picker:hover .mojo-datetime-trigger-clear,
+.mojo-datetime-picker:focus-within .mojo-datetime-trigger-clear {
+    display: inline-flex;
+}
+.mojo-datetime-trigger-clear:hover { background: var(--line-soft); color: var(--ink-strong); }
+
+/* ── Panel shell ──────────────────────────────────────────────── */
+/* The shared .mojo-popover shell is unpadded/unsized on purpose — the content
+   brings the padding and the floor that keeps calendar + time side by side
+   (~260 calendar + ~230 time + gap, source's numbers). */
+
+.mojo-popover.mojo-datetime-popover .mojo-datetime-popover-inner {
+    padding: 16px 18px;
+    min-width: 520px;
+}
+
+.mojo-datetime-picker-inline {
+    display: block;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+}
+.mojo-datetime-picker-inline .mojo-datetime-popover-inner {
+    padding: 16px 18px;
+    min-width: 520px;
+}
+.mojo-datetime-picker-inline.is-invalid { border-color: var(--bad); }
+.mojo-datetime-picker-inline.is-disabled { opacity: 0.55; }
+
+/* ── Two-column row: calendar left, time right ────────────────── */
+
+.mojo-datetime-row {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 18px;
+}
+
+.mojo-datetime-cal-col {
+    flex: 0 0 auto;
+    min-width: 250px;
+}
+
+.mojo-datetime-time-col {
+    flex: 1 1 auto;
+    min-width: 220px;
+    display: flex;
+    flex-direction: column;
+}
+
+.mojo-datetime-time-head {
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--line);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--mute);
+}
+
+/* The embedded TimePicker is a card in its own right — drop its chrome so it
+   reads as this popover's right-hand column, and let it fill the column so
+   the steppers sit against the calendar grid rather than at its top edge. */
+.mojo-datetime-time-col .mojo-time-picker {
+    flex: 1;
+    display: flex;
+    align-items: center;
+}
+.mojo-datetime-time-col .mojo-time-picker-inline {
+    flex: 1;
+    display: block;
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+/* ── Full-width timezone row ──────────────────────────────────── */
+/* Below the pair so the IANA combobox can use the whole popover width. */
+
+.mojo-datetime-tz-row {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--line);
+}
+
+.mojo-datetime-tz-label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--mute);
+}
+
+.mojo-datetime-tz-host { width: 100%; }
+/* The zone picker's own dropdown spans the row (it is locally positioned;
+   .mojo-popover is overflow:visible so it is never clipped). */
+.mojo-datetime-tz-host .combo-pop { min-width: 100%; }
+
+/* ── Footer ───────────────────────────────────────────────────── */
+
+.mojo-datetime-foot {
+    margin-top: 14px;
+    padding-top: 10px;
+    border-top: 1px solid var(--line);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+/* "Now" is the source's btn-link: quiet until hovered. */
+.mojo-datetime-now {
+    background: transparent;
+    border-color: transparent;
+    color: var(--accent);
+}
+.mojo-datetime-now:hover { background: var(--accent-soft); border-color: transparent; }
+.mojo-datetime-now:disabled:hover { background: transparent; }
+
+/* Narrow viewports: stack the columns rather than overflow the screen. The
+   popover is portal-mounted and sizes to its own content, so this is the only
+   place the layout can break. */
+@media (max-width: 620px) {
+    .mojo-popover.mojo-datetime-popover .mojo-datetime-popover-inner,
+    .mojo-datetime-picker-inline .mojo-datetime-popover-inner {
+        min-width: 0;
+    }
+    .mojo-datetime-row { flex-direction: column; gap: 14px; }
+    .mojo-datetime-cal-col { min-width: 0; }
+    .mojo-datetime-time-col { min-width: 0; }
+}

package/src/styles/components/detail-primitives.css

@@ -0,0 +1,246 @@
+/* ============================================================
+   Detail primitives — StatusPanel, FlowStrip, Timeline,
+   KnownFieldsCard, MetadataSection, StackTraceView.
+
+   Ported from web-mojo src/core/css/core.css (the "StatusPanel",
+   "Timeline", "KnownFieldsCard", "FlowStrip" blocks) and the
+   inline <style> blocks AdminMetadataSection/StackTraceView
+   shipped. Bootstrap variables map onto mojo tokens:
+     --bs-tertiary-bg            → --surface2
+     --bs-secondary-color        → --mute
+     --bs-emphasis-color         → --ink-strong
+     --bs-body-color             → --ink
+     --bs-border-color           → --line
+     --bs-border-color-translucent → --line-soft
+     rgba(--bs-<tone>-rgb, .10)  → --<tone>-soft
+   so everything reads correctly under BOTH data-theme values —
+   the two ported <style> blocks were hardcoded light-only.
+   ============================================================ */
+
+/* ============================================================ StatusPanel */
+/* Borderless flat surface; the tone-tinted bg + colored state eyebrow carry
+   the whole signal. Container queries (not media queries) stack the actions
+   below the headline under ~480px — the panel is routinely nested in a modal. */
+.detail-status-panel {
+    container-type: inline-size;
+    border: 0;
+    border-radius: 12px;
+    padding: 14px 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    background: var(--surface2);
+}
+@container (max-width: 480px) {
+    .detail-status-panel { flex-direction: column; align-items: stretch; gap: 12px; }
+    .detail-status-panel .detail-status-actions { flex-wrap: wrap; }
+}
+.detail-status-panel .detail-status-headline { min-width: 0; flex: 1; }
+.detail-status-panel .detail-status-state {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
+    margin-bottom: 3px; color: var(--mute);
+    display: inline-flex; align-items: center; gap: 6px;
+}
+.detail-status-panel .detail-status-dot {
+    width: 8px; height: 8px; border-radius: 999px;
+    background: currentColor; box-shadow: 0 0 8px currentColor;
+}
+.detail-status-panel .detail-status-icon { font-size: 14px; line-height: 1; }
+.detail-status-panel .detail-status-line {
+    font-size: 16px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em;
+    margin: 0 0 3px; color: var(--ink-strong);
+}
+.detail-status-panel .detail-status-meta { color: var(--mute); font-size: 12.5px; line-height: 1.45; }
+.detail-status-panel .detail-status-meta code {
+    font-size: 12px; background: var(--surface); border-radius: 5px; padding: 1px 5px; color: var(--ink);
+}
+.detail-status-panel .detail-status-actions { display: flex; gap: 6px; flex-shrink: 0; }
+
+.detail-status-panel.tone-danger  { background: var(--bad-soft); }
+.detail-status-panel.tone-warning { background: var(--warn-soft); }
+.detail-status-panel.tone-success { background: var(--ok-soft); }
+.detail-status-panel.tone-info    { background: var(--info-soft); }
+.detail-status-panel.tone-primary { background: var(--accent-soft); }
+.detail-status-panel.tone-muted   { background: var(--surface2); }
+.detail-status-panel.tone-danger  .detail-status-state { color: var(--bad); }
+.detail-status-panel.tone-warning .detail-status-state { color: var(--warn); }
+.detail-status-panel.tone-success .detail-status-state { color: var(--ok); }
+.detail-status-panel.tone-info    .detail-status-state { color: var(--info); }
+.detail-status-panel.tone-primary .detail-status-state { color: var(--accent); }
+.detail-status-panel.tone-muted   .detail-status-state { color: var(--mute); }
+
+/* ============================================================ FlowStrip */
+/* Borderless tinted surface, hairlines between steps. Column count rides
+   --flow-strip-cols (set inline from steps.length); container queries reflow
+   4 → 2 → 1 off the strip's own width. */
+.detail-flow-strip {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: repeat(var(--flow-strip-cols, 4), 1fr);
+    background: var(--surface2);
+    border: 0; border-radius: 12px; overflow: hidden;
+}
+.detail-flow-strip .flow-strip-step { position: relative; padding: 14px 16px; min-width: 0; background: transparent; }
+.detail-flow-strip .flow-strip-step + .flow-strip-step { border-left: 1px solid var(--line-soft); }
+/* Per-step tone: a 2px cap over the step (muted = no cap). */
+.detail-flow-strip .flow-strip-step::before {
+    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent;
+}
+.detail-flow-strip .flow-strip-step.tone-danger::before  { background: var(--bad); }
+.detail-flow-strip .flow-strip-step.tone-warning::before { background: var(--warn); }
+.detail-flow-strip .flow-strip-step.tone-success::before { background: var(--ok); }
+.detail-flow-strip .flow-strip-step.tone-info::before    { background: var(--info); }
+.detail-flow-strip .flow-strip-step.tone-primary::before { background: var(--accent); }
+.detail-flow-strip .flow-strip-num {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--mute);
+}
+.detail-flow-strip .flow-strip-step.tone-danger  .flow-strip-num { color: var(--bad); }
+.detail-flow-strip .flow-strip-step.tone-warning .flow-strip-num { color: var(--warn); }
+.detail-flow-strip .flow-strip-step.tone-success .flow-strip-num { color: var(--ok); }
+.detail-flow-strip .flow-strip-step.tone-info    .flow-strip-num { color: var(--info); }
+.detail-flow-strip .flow-strip-step.tone-primary .flow-strip-num { color: var(--accent); }
+.detail-flow-strip .flow-strip-title {
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    margin: 2px 0 5px; font-size: 13px; font-weight: 650; color: var(--ink-strong);
+}
+.detail-flow-strip .flow-strip-action { opacity: 0.5; }
+.detail-flow-strip .flow-strip-step:hover .flow-strip-action { opacity: 1; }
+.detail-flow-strip .flow-strip-value { font-size: 13px; font-weight: 550; line-height: 1.35; color: var(--ink); }
+.detail-flow-strip .flow-strip-value code {
+    font-size: 12px; background: var(--surface); border-radius: 5px; padding: 1px 5px;
+}
+.detail-flow-strip .flow-strip-empty { color: var(--mute); font-style: italic; font-weight: 400; }
+.detail-flow-strip .flow-strip-hint { font-size: 11.5px; color: var(--mute); margin-top: 4px; line-height: 1.4; }
+@container (max-width: 760px) { .detail-flow-strip { grid-template-columns: 1fr 1fr; } }
+@container (max-width: 460px) {
+    .detail-flow-strip { grid-template-columns: 1fr; }
+    .detail-flow-strip .flow-strip-step + .flow-strip-step { border-left: 0; border-top: 1px solid var(--line-soft); }
+}
+
+/* ============================================================ Timeline */
+.detail-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
+.detail-timeline::before {
+    content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
+    background: linear-gradient(180deg, var(--line), transparent);
+}
+.detail-timeline-item {
+    position: relative; padding: 6px 0 13px;
+    display: grid; grid-template-columns: 1fr auto; gap: 8px;
+}
+.detail-timeline-item::before {
+    content: ''; position: absolute; left: -18px; top: 12px;
+    width: 9px; height: 9px; border-radius: 999px;
+    background: var(--surface); border: 1.5px solid var(--mute);
+}
+.detail-timeline-item.tone-danger::before  { border-color: var(--bad); }
+.detail-timeline-item.tone-warning::before { border-color: var(--warn); }
+.detail-timeline-item.tone-success::before { border-color: var(--ok); }
+.detail-timeline-item.tone-info::before    { border-color: var(--info); }
+.detail-timeline-item.tone-primary::before { border-color: var(--accent); }
+.detail-timeline-item.tone-muted::before   { border-color: var(--mute); }
+.detail-timeline-title { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
+.detail-timeline-body { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
+.detail-timeline-body code {
+    font-size: 12px; background: var(--surface2); border-radius: 5px; padding: 1px 5px; color: var(--ink);
+}
+.detail-timeline-meta {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums;
+    white-space: nowrap; align-self: start; padding-top: 2px;
+}
+.detail-timeline-empty { list-style: none; padding: 8px 0; font-size: 13px; }
+
+/* ============================================================ KnownFieldsCard */
+.detail-known-fields-card { display: block; }
+.detail-known-fields-grid { margin-bottom: 4px; }
+/* Reuses .flat-row (theme.css) — the 3rd (action) grid column stays empty. */
+.detail-known-fields-card .flat-value code { font-size: 12px; }
+.detail-known-fields-empty { font-size: 13px; padding: 6px 0; }
+.detail-known-fields-raw {
+    margin-top: 14px; border: 1px solid var(--line); border-radius: 10px;
+    background: var(--surface2); overflow: hidden;
+}
+.detail-known-fields-raw-summary {
+    cursor: pointer; list-style: none; user-select: none;
+    display: flex; align-items: center; gap: 7px;
+    padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--mute);
+}
+.detail-known-fields-raw-summary::-webkit-details-marker { display: none; }
+.detail-known-fields-raw-summary::before {
+    content: '\25B6'; /* ▶ */
+    display: inline-block; font-size: 9px; color: var(--mute); transition: transform 0.15s ease;
+}
+.detail-known-fields-raw[open] > .detail-known-fields-raw-summary::before { transform: rotate(90deg); }
+.detail-known-fields-raw-summary:hover { color: var(--ink-strong); }
+.detail-known-fields-raw-body {
+    margin: 0; padding: 11px 13px 13px; border-top: 1px solid var(--line-soft);
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 12px; line-height: 1.5; color: var(--ink);
+    white-space: pre-wrap; word-break: break-word;
+    max-height: 28rem; overflow: auto; background: var(--surface);
+}
+@media (prefers-reduced-motion: reduce) {
+    .detail-known-fields-raw-summary::before { transition: none; }
+}
+
+/* ============================================================ MetadataSection */
+.admin-metadata-section { display: block; }
+.amd-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
+.amd-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-strong); }
+.amd-error {
+    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+    background: var(--bad-soft); color: var(--bad);
+    border: 1px solid var(--bad); border-radius: 9px;
+    padding: 8px 12px; font-size: 13px; font-weight: 550;
+}
+.amd-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
+.amd-item { display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-bottom: 1px solid var(--line-soft); }
+.amd-item:last-child { border-bottom: none; }
+.amd-editor { background: var(--surface2); }
+.amd-key {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 12px; font-weight: 650; color: var(--ink-strong);
+    min-width: 140px; flex-shrink: 0; word-break: break-all;
+}
+.amd-value { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); word-break: break-word; }
+.amd-blob { font-size: 12px; color: var(--mute); background: var(--surface2); border-radius: 5px; padding: 1px 6px; }
+.amd-actions { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
+.amd-remove:hover:not(:disabled) { color: var(--bad); }
+.amd-key-input { min-width: 140px; width: 140px; flex: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
+.amd-value-input { flex: 1; min-width: 0; width: auto; }
+.amd-empty { padding: 26px 20px; text-align: center; color: var(--mute); font-size: 13px; }
+.amd-empty i { font-size: 22px; display: block; margin-bottom: 7px; }
+
+/* ============================================================ StackTraceView */
+.stack-trace-view {
+    background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
+}
+.stack-trace-body { max-height: 600px; overflow: auto; padding: 8px 0; }
+.stack-trace-line {
+    font-family: ui-monospace, "SF Mono", Menlo, "Ubuntu Mono", Consolas, monospace;
+    font-size: 12.5px; line-height: 1.6; padding: 2px 12px; margin: 0;
+    border-left: 3px solid transparent; white-space: pre-wrap; word-break: break-word;
+}
+.stack-trace-line:hover { background: var(--line-soft); }
+.stack-trace-error {
+    color: var(--bad); font-weight: 650;
+    border-left-color: var(--bad); background: var(--bad-soft);
+}
+.stack-trace-error:hover { background: var(--bad-soft); filter: brightness(1.06); }
+.stack-trace-frame { border-left-color: var(--accent); }
+.stack-trace-fn { color: var(--accent); font-weight: 600; }
+.stack-trace-loc { color: var(--mute); font-size: 12px; }
+.stack-trace-lineno { color: var(--warn); font-weight: 650; }
+.stack-trace-context { color: var(--ink); }
+.stack-trace-empty { padding: 14px; font-size: 13px; }
+.stack-trace-toggle {
+    display: flex; align-items: center; justify-content: center; gap: 7px;
+    width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--line);
+    background: var(--surface); color: var(--mute);
+    font-size: 12.5px; font-weight: 600; cursor: pointer;
+}
+.stack-trace-toggle:hover { color: var(--ink-strong); background: var(--surface2); }
+.stack-trace-toggle i { font-size: 11px; }

package/src/styles/components/detailview.css

@@ -0,0 +1,69 @@
+/* ============================================================ DetailView C1
+   Chrome for the C1 additions ONLY — rail badges, the header kebab menu,
+   and the keep-alive wrappers. The base .detail / .detail-rail / .rail-item
+   styles stay in theme.css. Tokens only; both themes come from the token
+   flip. NOT imported by theme.css yet — the orchestrator adds the @import
+   at merge time. */
+
+/* Rail badges — a placement-only wrapper pinned to the rail item's right
+   edge. Primitive badge values arrive pre-wrapped in .chip.chip-muted
+   (web-mojo's muted default); rich nodes style themselves. */
+.rail-badge { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
+.rail-badge .chip { font-size: 10px; padding: 1px 7px; font-weight: 650; }
+/* The dot idiom — attention without a count. */
+.rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+
+/* Header kebab — .btn-icon carries the base look; hold the hover state
+   while the menu is open so the trigger reads as "on". */
+.dv-kebab[aria-expanded="true"] { background: var(--surface2); color: var(--ink-strong); }
+
+/* Kebab menu (inside the unpadded .mojo-popover shell — content brings its
+   own padding/width, per the Popover contract). */
+.dv-menu { padding: 5px; min-width: 200px; max-height: calc(100dvh - 24px); overflow-y: auto; }
+.dv-menu-item {
+    display: flex; align-items: center; gap: 9px; width: 100%;
+    padding: 7px 9px; border: none; background: none; border-radius: 7px;
+    text-align: left; cursor: pointer;
+    font-size: 13.5px; font-weight: 550; color: var(--ink);
+}
+.dv-menu-item:hover { background: var(--surface2); color: var(--ink-strong); }
+.dv-menu-item i { color: var(--mute); font-size: 13.5px; width: 16px; text-align: center; flex: none; }
+.dv-menu-item.dv-danger, .dv-menu-item.dv-danger i { color: var(--bad); }
+.dv-menu-item.dv-danger:hover { background: var(--bad-soft); }
+.dv-menu-sep { height: 1px; background: var(--line); margin: 5px 0; }
+
+/* Keep-alive wrappers: inactive sections stay mounted but hidden. The
+   [hidden] guard is explicit + !important so no future display rule on
+   .dv-keep can accidentally resurrect a hidden section's pixels. */
+.dv-keep[hidden] { display: none !important; }
+
+/* Responsive detail navigation uses the host width, including embedded views. */
+.detail-section-toggle { display: none; }
+.detail-title, .detail-sub { overflow-wrap: anywhere; }
+.detail-gutter { flex: none; }
+.dv-menu-item:disabled { opacity: .5; cursor: default; }
+@container (max-width: 560px) {
+    .detail .detail-header { padding: 12px; gap: 9px; }
+    .detail .detail-avatar { width: 34px; height: 34px; flex: none; }
+    .detail .detail-title { font-size: 16px; }
+    .detail .detail-sub { font-size: 12px; gap: 4px; }
+    .detail .detail-gutter { gap: 4px; }
+    .detail .detail-body { flex-direction: column; }
+    .detail .detail-section-toggle { display: flex; align-items: center; gap: 8px; flex: none; width: 100%; padding: 10px 14px; background: var(--surface2); color: var(--ink); border: 0; border-bottom: 1px solid var(--line); text-align: left; }
+    .detail .detail-rail { display: none; width: auto; flex: none; max-height: 32%; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }
+    .detail .detail-rail.detail-rail-expanded { display: block; }
+    .detail .detail-content { padding: 14px; }
+}
+/* Dialog-only constraints never cap page or embedded DetailView hosts. */
+.mojo-modal.mojo-modal { max-height: calc(100dvh - 24px); }
+.mojo-modal .modal-pad { overflow-wrap: anywhere; }
+.mojo-modal .modal-title { position: sticky; top: -20px; background: var(--surface); z-index: 1; padding-block: 5px; }
+.mojo-modal .modal-actions { position: sticky; bottom: -22px; background: var(--surface); padding-block: 12px; flex-wrap: wrap; z-index: 1; }
+@media (max-width: 560px) {
+    .mojo-modal .modal-pad { padding: 16px; }
+    .mojo-modal .modal-title { top: -16px; }
+    .mojo-modal .modal-actions { bottom: -16px; }
+}
+
+.modal-fallback-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
+.mojo-modal:has(.detail-gutter [aria-label="Close"]) > .modal-fallback-close { display: none; }

package/src/styles/components/drawer.css

@@ -0,0 +1,111 @@
+/* ============================================================
+   Drawer — the right slide-over variant of the native-<dialog>
+   modal manager (packages/portal-mojo/src/ui/modal.tsx).
+
+   TRANSIENT surface: modal, top-layer, awaitable, one at a time
+   per call. NOT the persistent shell right-panel slot (tickets /
+   assistant) — that is a non-modal layout region, a different
+   thing entirely.
+
+   Tokens only, both themes. Header shape (eyebrow · title · meta)
+   is web-mojo's Modal.drawer() header restyled onto mojo tokens.
+   ============================================================ */
+
+.mojo-drawer {
+    /* The UA gives dialog:modal `inset:0; margin:auto` plus
+       max-width/max-height: calc(100% - 6px - 2em). All four have to be
+       overridden to pin the panel right and let it run full-bleed. */
+    margin: 0 0 0 auto;
+    /* % (not vw) — the dialog is fixed-positioned, so % excludes the page
+       scrollbar; 100vw would push the panel that far off the right edge. */
+    width: min(var(--drawer-w, 480px), 100%);
+    max-width: 100%;
+    height: 100%;
+    height: 100dvh;      /* dvh keeps the panel honest under mobile browser chrome */
+    max-height: 100%;
+    max-height: 100dvh;
+    padding: 0;
+    border: none;
+    border-left: 1px solid var(--line);
+    border-radius: 0;
+    background: var(--surface);
+    color: var(--ink);
+    box-shadow: var(--shadow-pop);
+    overflow: hidden;
+    /* Keyframes, not a transition: a <dialog> is display:none until
+       showModal(), so there is no "from" state for a transition to run. */
+    animation: drawer-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.mojo-drawer::backdrop {
+    background: rgba(6, 9, 14, 0.55);
+    backdrop-filter: blur(2px);
+    animation: drawer-backdrop-in 220ms ease-out;
+}
+
+/* Exit: the manager adds this class, waits DRAWER_EXIT_MS, and only then
+   drops the item (unmount → dialog.close()) — so the slide-out plays. */
+.mojo-drawer-closing {
+    animation: drawer-out 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+    pointer-events: none; /* a panel on its way out is not a click target */
+}
+.mojo-drawer-closing::backdrop { animation: drawer-backdrop-out 200ms ease-in forwards; }
+
+@keyframes drawer-in { from { transform: translateX(100%); } }
+@keyframes drawer-out { to { transform: translateX(100%); } }
+@keyframes drawer-backdrop-in { from { opacity: 0; } }
+@keyframes drawer-backdrop-out { to { opacity: 0; } }
+
+/* The panel fills the dialog so the dialog element itself is only ever the
+   event target for ::backdrop clicks — which is how dismiss-on-backdrop
+   distinguishes "outside" from "inside". */
+.drawer-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.drawer-head {
+    display: flex; align-items: flex-start; gap: 12px;
+    flex: 0 0 auto;
+    padding: 16px 18px 13px;
+    border-bottom: 1px solid var(--line);
+}
+.drawer-head-text { flex: 1; min-width: 0; }
+.drawer-eyebrow {
+    display: block;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--mute); margin-bottom: 3px;
+}
+.drawer-title {
+    margin: 0;
+    font-size: 17px; font-weight: 750; line-height: 1.25; letter-spacing: -0.015em;
+    color: var(--ink-strong);
+    overflow-wrap: anywhere;
+}
+.drawer-meta {
+    display: flex; flex-wrap: wrap; gap: 3px 14px;
+    margin-top: 6px;
+    font-size: 12px; color: var(--mute);
+}
+.drawer-meta span { display: inline-flex; align-items: center; gap: 5px; }
+.drawer-meta i { font-size: 11px; }
+
+.drawer-body {
+    flex: 1; min-height: 0;
+    overflow: auto;
+    padding: 16px 18px 20px;
+}
+
+/* Full-bleed on phones — the min() clamp already caps the width; this drops
+   the seam so the panel reads as a page rather than a sliver. */
+@media (max-width: 560px) {
+    .mojo-drawer { width: 100%; border-left: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .mojo-drawer, .mojo-drawer::backdrop,
+    .mojo-drawer-closing, .mojo-drawer-closing::backdrop { animation: none; }
+}