@maxhealth.tech/prefab 0.3.22 → 0.3.23

package/dist/prefab.css

@@ -1,31 +1,12 @@
-/*
- * prefab.css — Base theme for the prefab renderer.
- *
- * Provides CSS custom properties (shadcn-compatible design tokens) and
- * structural styles for all pf-* component classes.  Import this file or
- * add a <link> tag to get a polished default look without BYO CSS.
- *
- * Token naming follows shadcn/ui conventions so existing Tailwind themes
- * can override them seamlessly.
- */
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   1. DESIGN TOKENS — Light & Dark
-   ═══════════════════════════════════════════════════════════════════════════
-   Fallback chain: MCP Apps vars → VS Code vars → static defaults.
-   When rendered inside Claude Desktop, VS Code webviews, or standalone,
-   the correct tokens are resolved automatically without user CSS.
-
-   MCP Apps spec:  --color-background-primary, --color-text-primary, …
-   VS Code:        --vscode-editor-background, --vscode-editor-foreground, …
-   ═══════════════════════════════════════════════════════════════════════════ */
+/* prefab.css: shadcn-compatible tokens and pf-* component styles. Built into dist/prefab.css. */
 
 :root {
-  /* Radii */
+  color-scheme: light;
+
   --radius: var(--border-radius-md, 8px);
   --radius-sm: var(--border-radius-sm, 6px);
+  --radius-lg: var(--border-radius-lg, 12px);
 
-  /* Core palette — MCP Apps → VS Code → static */
   --background:            var(--color-background-primary, var(--vscode-editor-background, #ffffff));
   --foreground:            var(--color-text-primary, var(--vscode-editor-foreground, #09090b));
 
@@ -50,24 +31,24 @@
   --destructive:           var(--color-background-danger, var(--vscode-errorForeground, #ef4444));
   --destructive-foreground: var(--color-text-inverse, #ffffff);
 
-  --success:               var(--color-background-success, #22c55e);
+  --success:               var(--color-background-success, #16a34a);
   --success-foreground:    var(--color-text-inverse, #ffffff);
 
   --warning:               var(--color-background-warning, #f59e0b);
-  --warning-foreground:    var(--color-text-inverse, #ffffff);
+  --warning-foreground:    var(--color-text-inverse, #422006);
+
+  --info:                  var(--color-text-info, #0284c7);
+  --info-foreground:       var(--color-text-inverse, #ffffff);
 
   --border:                var(--color-border-primary, var(--vscode-panel-border, #e5e7eb));
   --input:                 var(--color-border-secondary, var(--vscode-input-background, #e5e7eb));
   --ring:                  var(--color-ring-primary, var(--vscode-focusBorder, #3b82f6));
 
-  /* Typography — MCP Apps uses --font-sans/--font-mono directly (same names);
-     host inline styles override these automatically. VS Code fallback here. */
   --font-sans: var(--vscode-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif);
   --font-mono: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace);
 
-  /* Shadows — MCP Apps host overrides these names inline when present */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
@@ -75,6 +56,8 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
     --background:            var(--color-background-primary, var(--vscode-editor-background, #09090b));
     --foreground:            var(--color-text-primary, var(--vscode-editor-foreground, #fafafa));
 
@@ -105,30 +88,22 @@
     --warning:               var(--color-background-warning, #fbbf24);
     --warning-foreground:    var(--color-text-inverse, #09090b);
 
+    --info:                  var(--color-text-info, #38bdf8);
+    --info-foreground:       var(--color-text-inverse, #09090b);
+
     --border:                var(--color-border-primary, var(--vscode-panel-border, #27272a));
     --input:                 var(--color-border-secondary, var(--vscode-input-background, #27272a));
     --ring:                  var(--color-ring-primary, var(--vscode-focusBorder, #60a5fa));
   }
 }
 
-/* Explicit dark override, via the data-theme attribute or the dark class.
-   Static values only — NO host var references.
-   In hosted mode (Claude/VS Code), data-theme is never set; the host's inline
-   vars resolve through the var() chain in :root / @media-dark above.
-
-   Three selectors, matching what compileThemeCss() emits for a wire theme, so
-   the base tokens and the theme's tokens always flip on the same element:
-   - :root[...] keeps specificity (0,2,0) to beat the @media dark :root:not(...)
-     rule, which it ties with and wins on document order.
-   - the bare attribute and class selectors carry (0,1,0) and match at ANY depth,
-     which is what setThemeAttrs needs: it themes the prefab mount container, and
-     createThemeToggle({ syncDocument: false }) themes ONLY that container.
-     Specificity is not a concern below the root, since every other token rule
-     here is :root-scoped and so does not match a container at all — a
-     declaration on the element always beats what it would otherwise inherit. */
+/* Explicit schemes via data-theme or the dark/light class. Static values only, so
+   the bare selectors also theme a nested mount container at any depth. */
 :root[data-theme="dark"],
 [data-theme="dark"],
 .dark {
+  color-scheme: dark;
+
   --background: #09090b;
   --foreground: #fafafa;
 
@@ -159,17 +134,19 @@
   --warning: #fbbf24;
   --warning-foreground: #09090b;
 
+  --info: #38bdf8;
+  --info-foreground: #09090b;
+
   --border: #27272a;
   --input: #27272a;
   --ring: #60a5fa;
 }
 
-/* Explicit light override, via the data-theme attribute or the light class.
-   Same specificity, depth and static-value strategy as the dark block above.
-   This is the direction that makes a light island under a dark root work. */
 :root[data-theme="light"],
 [data-theme="light"],
 .light {
+  color-scheme: light;
+
   --background: #ffffff;
   --foreground: #09090b;
 
@@ -194,37 +171,56 @@
   --destructive: #ef4444;
   --destructive-foreground: #ffffff;
 
-  --success: #22c55e;
+  --success: #16a34a;
   --success-foreground: #ffffff;
 
   --warning: #f59e0b;
-  --warning-foreground: #ffffff;
+  --warning-foreground: #422006;
+
+  --info: #0284c7;
+  --info-foreground: #ffffff;
 
   --border: #e5e7eb;
   --input: #e5e7eb;
   --ring: #3b82f6;
 }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   2. RESET & BASE
-   ═══════════════════════════════════════════════════════════════════════════ */
-
 *, *::before, *::after {
   box-sizing: border-box;
 }
 
 .pf-app-root {
   font-family: var(--font-sans);
+  font-size: 1rem;
   color: var(--foreground);
   background-color: var(--background);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+:where(.pf-button, .pf-input, .pf-textarea, .pf-select, .pf-combobox-input, .pf-datatable-search,
+  .pf-tab-trigger, .pf-accordion-trigger, .pf-carousel-prev, .pf-carousel-next, .pf-dialog-close,
+  .pf-theme-toggle, .pf-expandable-row-summary) {
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
 }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   3. LAYOUT
-   ═══════════════════════════════════════════════════════════════════════════ */
+:where(.pf-app-root, .pf-toast-region, .pf-dialog) :focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.pf-app-root, .pf-toast-region) *,
+  :where(.pf-app-root, .pf-toast-region) *::before,
+  :where(.pf-app-root, .pf-toast-region) *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
 
 .pf-column { display: flex; flex-direction: column; }
 .pf-row    { display: flex; flex-direction: row; flex-wrap: wrap; }
@@ -236,27 +232,35 @@
 .pf-span { display: inline; }
 .pf-pages { position: relative; }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   4. TYPOGRAPHY
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-master-detail { display: flex; flex-direction: row; min-height: 0; }
+.pf-master-detail-master { flex-shrink: 0; overflow: auto; }
+.pf-master-detail-detail { flex: 1; min-width: 0; overflow: auto; }
+
+@media (max-width: 560px) {
+  .pf-grid { grid-template-columns: minmax(0, 1fr) !important; }
+  .pf-grid-item { grid-column: auto !important; }
+  .pf-master-detail { flex-direction: column; }
+  .pf-master-detail-master { width: auto !important; }
+}
 
-.pf-heading { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
-.pf-h1 { font-size: 2.25rem; line-height: 2.5rem; }
+.pf-heading { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
+.pf-h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; }
 .pf-h2 { font-size: 1.875rem; line-height: 2.25rem; }
 .pf-h3 { font-size: 1.5rem;  line-height: 2rem; }
 .pf-h4 { font-size: 1.25rem; line-height: 1.75rem; }
+.pf-h5 { font-size: 1.125rem; line-height: 1.75rem; }
+.pf-h6 { font-size: 1rem; line-height: 1.5rem; }
 
-.pf-text { }
-.pf-p    { margin: 0; }
-.pf-lead { font-size: 1.25rem; color: var(--muted-foreground); }
-.pf-large { font-size: 1.125rem; font-weight: 600; }
-.pf-small { font-size: 0.875rem; }
-.pf-muted { color: var(--muted-foreground); font-size: 0.875rem; margin: 0; }
+.pf-p     { margin: 0; line-height: 1.625; }
+.pf-lead  { margin: 0; font-size: 1.125rem; line-height: 1.75rem; color: var(--muted-foreground); }
+.pf-large { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
+.pf-small { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
+.pf-muted { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
 
 .pf-blockquote {
   margin: 0;
   padding-left: 1rem;
-  border-left: 3px solid var(--border);
+  border-left: 2px solid var(--border);
   font-style: italic;
   color: var(--muted-foreground);
 }
@@ -264,31 +268,40 @@
 .pf-label {
   font-size: 0.875rem;
   font-weight: 500;
+  line-height: 1.25rem;
 }
 
 .pf-link {
   color: var(--primary);
   text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--primary) 40%, transparent);
   text-underline-offset: 4px;
   cursor: pointer;
+  transition: text-decoration-color 0.15s;
 }
-.pf-link:hover { text-decoration-thickness: 2px; }
+.pf-link:hover { text-decoration-color: currentColor; }
 
 .pf-code {
   font-family: var(--font-mono);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
+  line-height: 1.6;
   background: var(--muted);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  padding: 1rem;
+  padding: 0.875rem 1rem;
   overflow-x: auto;
   margin: 0;
   white-space: pre;
 }
 
 .pf-markdown { line-height: 1.7; }
-.pf-markdown h1, .pf-markdown h2, .pf-markdown h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
+.pf-markdown > :first-child { margin-top: 0; }
+.pf-markdown > :last-child { margin-bottom: 0; }
+.pf-markdown h1, .pf-markdown h2, .pf-markdown h3 { margin: 1.5em 0 0.5em; line-height: 1.3; letter-spacing: -0.01em; }
 .pf-markdown p { margin: 0.75em 0; }
+.pf-markdown ul, .pf-markdown ol { margin: 0.75em 0; padding-left: 1.5em; }
+.pf-markdown li + li { margin-top: 0.25em; }
+.pf-markdown a { color: var(--primary); text-underline-offset: 4px; }
 .pf-markdown code {
   font-family: var(--font-mono);
   font-size: 0.875em;
@@ -296,6 +309,13 @@
   padding: 0.15em 0.4em;
   border-radius: 4px;
 }
+.pf-markdown pre {
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.875rem 1rem;
+  overflow-x: auto;
+}
 .pf-markdown pre code { background: none; padding: 0; }
 
 .pf-kbd {
@@ -304,72 +324,88 @@
   justify-content: center;
   font-family: var(--font-mono);
   font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
   min-width: 1.5em;
-  padding: 0.15em 0.4em;
+  height: 1.5em;
+  padding: 0 0.4em;
   border: 1px solid var(--border);
   border-radius: 4px;
   background: var(--muted);
+  color: var(--muted-foreground);
   box-shadow: 0 1px 0 var(--border);
 }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   5. CARD
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-app-root [role="button"]:not(button, .pf-expandable-row-summary) { cursor: pointer; }
 
 .pf-card {
   background: var(--card);
   color: var(--card-foreground);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
 }
+.pf-card:not(:has(> .pf-card-header, > .pf-card-content, > .pf-card-footer)) { padding: 1.5rem; }
 
-.pf-card-header  { padding: 1.5rem 1.5rem 0; }
-.pf-card-content { padding: 1.5rem; }
-.pf-card-footer  { padding: 0 1.5rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
+.pf-card[role="button"] { transition: border-color 0.15s, box-shadow 0.15s; }
+.pf-card[role="button"]:hover { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); box-shadow: var(--shadow-md); }
 
-.pf-card-title       { margin: 0; font-size: 1.25rem; font-weight: 600; }
-.pf-card-description { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
+.pf-card-header  { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 1.5rem 0; }
+.pf-card-content { padding: 1.5rem; }
+.pf-card-header + .pf-card-content { padding-top: 1.25rem; }
+.pf-card-footer  { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem 1.5rem; }
+.pf-card-header:last-child { padding-bottom: 1.5rem; }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   6. ALERT
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-card-title       { margin: 0; font-size: 1.125rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
+.pf-card-description { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
 
 .pf-alert {
+  --pf-tone: var(--foreground);
   position: relative;
-  padding: 1rem 1rem 1rem 3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
+  background: var(--card);
+  color: var(--card-foreground);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
-.pf-alert[data-variant="destructive"] {
-  border-color: var(--destructive);
-  color: var(--destructive);
+.pf-alert:has(> .pf-alert-icon) { padding-left: 2.75rem; }
+.pf-alert[data-variant="destructive"] { --pf-tone: var(--destructive); }
+.pf-alert[data-variant="success"]     { --pf-tone: var(--success); }
+.pf-alert[data-variant="warning"]     { --pf-tone: var(--warning); }
+.pf-alert[data-variant="info"]        { --pf-tone: var(--info); }
+.pf-alert:not([data-variant="default"]) {
+  border-color: color-mix(in oklab, var(--pf-tone) 45%, var(--border));
+  background: color-mix(in oklab, var(--pf-tone) 7%, var(--card));
+  color: color-mix(in oklab, var(--pf-tone) 70%, var(--foreground));
 }
 .pf-alert-icon {
   position: absolute;
   left: 1rem;
-  top: 1rem;
+  top: 0.9375rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--pf-tone);
 }
-.pf-alert-title       { margin: 0; font-weight: 600; font-size: 0.875rem; }
-.pf-alert-description { margin: 0.25rem 0 0; font-size: 0.875rem; }
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   7. BADGE
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-alert-title       { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
+.pf-alert-description { margin: 0; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.9; }
+.pf-alert[data-variant="default"] .pf-alert-description { color: var(--muted-foreground); opacity: 1; }
 
 .pf-badge {
   display: inline-flex;
   align-items: center;
-  /* Hug content: as a flex child, inline-flex is blockified to flex and would
-     otherwise stretch to the container's cross size (full width in a column,
-     full height in a row). align-self keeps the pill intrinsically sized; an
-     explicit w-full/width utility still overrides it. */
   align-self: flex-start;
+  gap: 0.25rem;
+  border: 1px solid transparent;
   border-radius: 9999px;
-  padding: 0.15em 0.6em;
+  padding: 0.125rem 0.5rem;
   font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
+  font-weight: 500;
+  line-height: 1rem;
   white-space: nowrap;
   transition: background-color 0.15s;
 }
@@ -378,27 +414,104 @@
 .pf-badge[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
 .pf-badge[data-variant="success"]     { background: var(--success); color: var(--success-foreground); }
 .pf-badge[data-variant="warning"]     { background: var(--warning); color: var(--warning-foreground); }
-.pf-badge[data-variant="outline"]     { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
+.pf-badge[data-variant="info"]        { background: var(--info); color: var(--info-foreground); }
+.pf-badge[data-variant="outline"]     { background: transparent; border-color: var(--border); color: var(--foreground); }
 
 .pf-dot {
   display: inline-block;
+  flex-shrink: 0;
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 9999px;
+  background-color: var(--muted-foreground);
 }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   8. DATA — Metric, Ring, Progress, Separator, Loader, Icon, Sparkline
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-.pf-metric       { display: flex; flex-direction: column; gap: 0.25rem; }
-.pf-metric-label { font-size: 0.875rem; color: var(--muted-foreground); }
-.pf-metric-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
-.pf-metric-delta { font-size: 0.875rem; font-weight: 500; margin-left: 0.5rem; }
-.pf-metric-desc  { font-size: 0.75rem; color: var(--muted-foreground); }
+.pf-toast-region {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: min(24rem, calc(100vw - 2rem));
+  font-family: var(--font-sans);
+  color: var(--foreground);
+  line-height: 1.5;
+  pointer-events: none;
+}
+.pf-toast {
+  --pf-tone: var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  background: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--pf-tone);
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+  animation: pf-toast-in 0.2s ease-out;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.pf-toast--success { --pf-tone: var(--success); }
+.pf-toast--error   { --pf-tone: var(--destructive); }
+.pf-toast--warning { --pf-tone: var(--warning); }
+.pf-toast--info    { --pf-tone: var(--info); }
+.pf-toast--leaving { opacity: 0; transform: translateY(0.5rem); }
+.pf-toast-title       { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
+.pf-toast-description { font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted-foreground); }
+@keyframes pf-toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
+
+.pf-theme-toggle {
+  position: absolute;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  transition: color 0.15s, background-color 0.15s;
+}
+.pf-theme-toggle:hover { color: var(--foreground); background: var(--muted); }
+.pf-theme-toggle[data-position="top-right"]    { top: 0.25rem; right: 0.25rem; }
+.pf-theme-toggle[data-position="top-left"]     { top: 0.25rem; left: 0.25rem; }
+.pf-theme-toggle[data-position="bottom-right"] { bottom: 0.25rem; right: 0.25rem; }
+.pf-theme-toggle[data-position="bottom-left"]  { bottom: 0.25rem; left: 0.25rem; }
+.pf-app-root:has(> .pf-theme-toggle[data-position^="top"])    { padding-top: 2.75rem; }
+.pf-app-root:has(> .pf-theme-toggle[data-position^="bottom"]) { padding-bottom: 2.75rem; }
+
+.pf-metric       { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
+.pf-metric-label { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--muted-foreground); }
+.pf-metric-row   { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
+.pf-metric-value { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
+.pf-metric-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground);
+}
+.pf-metric-delta[data-sentiment="positive"] { color: color-mix(in oklab, var(--success) 80%, var(--foreground)); }
+.pf-metric-delta[data-sentiment="negative"] { color: color-mix(in oklab, var(--destructive) 85%, var(--foreground)); }
+.pf-metric-desc  { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
 
-.pf-ring       { position: relative; display: inline-flex; align-items: center; justify-content: center; }
-.pf-ring-label { position: absolute; text-align: center; font-size: 0.875rem; font-weight: 600; }
+.pf-ring       { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.pf-ring svg   { display: block; }
+.pf-ring-track { stroke: var(--muted); }
+.pf-ring-fill  { stroke: var(--primary); transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.4s ease; }
+.pf-ring-label { position: absolute; text-align: center; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
 
 .pf-progress {
   width: 100%;
@@ -415,300 +528,433 @@
 }
 
 .pf-separator {
-  border: none;
-  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  width: 100%;
+  height: 0;
   margin: 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+.pf-separator[data-orientation="vertical"] {
+  width: 0;
+  height: auto;
+  align-self: stretch;
+  border-top: 0;
+  border-left: 1px solid var(--border);
 }
 
 .pf-loader {
   display: inline-block;
+  flex-shrink: 0;
+  align-self: center;
   width: 1.5rem;
   height: 1.5rem;
   border: 2px solid var(--muted);
   border-top-color: var(--primary);
   border-radius: 50%;
-  animation: pf-spin 0.6s linear infinite;
+  animation: pf-spin 0.7s linear infinite;
 }
 @keyframes pf-spin { to { transform: rotate(360deg); } }
 
-.pf-icon { display: inline-flex; align-items: center; }
-
-.pf-sparkline svg { display: block; }
+.pf-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
+.pf-icon svg { width: 100%; height: 100%; }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   9. DATATABLE
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-sparkline { display: inline-flex; flex-shrink: 0; }
+.pf-sparkline svg { display: block; overflow: visible; }
+.pf-sparkline polyline { stroke: var(--primary); stroke-linecap: round; stroke-linejoin: round; }
 
-.pf-datatable-wrapper { overflow-x: auto; }
+.pf-datatable-wrapper { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
+.pf-datatable-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
 
-.pf-datatable {
+.pf-datatable, .pf-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
+  line-height: 1.25rem;
 }
-.pf-datatable-th {
+.pf-datatable-th, .pf-table-header {
+  height: 2.5rem;
+  padding: 0 0.75rem;
   text-align: left;
-  padding: 0.75rem 1rem;
-  font-weight: 600;
-  border-bottom: 2px solid var(--border);
+  vertical-align: middle;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  border-bottom: 1px solid var(--border);
   white-space: nowrap;
 }
-.pf-datatable-td {
-  padding: 0.75rem 1rem;
+.pf-datatable-th { background: color-mix(in oklab, var(--muted) 45%, transparent); }
+.pf-datatable-td, .pf-table-cell {
+  padding: 0.75rem;
+  vertical-align: middle;
   border-bottom: 1px solid var(--border);
 }
-.pf-datatable-search {
-  width: 100%;
-  max-width: 20rem;
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.75rem;
-  border: 1px solid var(--input);
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  background: var(--background);
-  color: var(--foreground);
-}
-.pf-datatable-search:focus {
-  outline: 2px solid var(--ring);
-  outline-offset: -1px;
-}
+.pf-datatable tbody tr:last-child .pf-datatable-td { border-bottom: 0; }
+.pf-datatable-row, .pf-table tbody .pf-table-row { transition: background-color 0.15s; }
+.pf-datatable-row:hover, .pf-table tbody .pf-table-row:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
+.pf-datatable-row-clickable { cursor: pointer; }
+.pf-datatable-row-selected,
+.pf-datatable-row-selected:hover { background: color-mix(in oklab, var(--primary) 12%, transparent); }
+.pf-datatable-empty { padding: 1.5rem 0.75rem; text-align: center; color: var(--muted-foreground); }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   10. TABLE (semantic HTML table)
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-.pf-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-.pf-table-row { }
-/* Table({ striped: true }) — shade alternate body rows. */
 .pf-table-striped tbody .pf-table-row:nth-child(even) {
   background: color-mix(in oklab, var(--muted) 40%, transparent);
 }
-.pf-table-header {
-  text-align: left;
-  padding: 0.75rem 1rem;
-  font-weight: 600;
-  border-bottom: 2px solid var(--border);
-}
-.pf-table-cell {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border);
-}
+.pf-tfoot .pf-table-cell { font-weight: 500; background: color-mix(in oklab, var(--muted) 45%, transparent); }
 .pf-table-caption {
   caption-side: bottom;
-  padding: 0.5rem;
+  padding-top: 0.75rem;
   color: var(--muted-foreground);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 
-.pf-expandable-row { }
+.pf-expandable-row { border-bottom: 1px solid var(--border); }
 .pf-expandable-row-summary {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  width: 100%;
+  padding: 0.625rem 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: left;
   cursor: pointer;
   user-select: none;
 }
 .pf-expandable-arrow {
   display: inline-block;
+  flex-shrink: 0;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  margin: 0 0.25rem;
+  border-right: 1.5px solid var(--muted-foreground);
+  border-bottom: 1.5px solid var(--muted-foreground);
+  transform: rotate(-45deg);
   transition: transform 0.2s;
 }
-.pf-expandable-row-detail {
-  padding-left: 1.5rem;
-}
+.pf-expandable-row-summary[aria-expanded="true"] .pf-expandable-arrow { transform: rotate(45deg); }
+.pf-expandable-row-detail { padding: 0 0 0.75rem 1.5rem; }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   11. FORM
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-ring[data-variant="success"] .pf-ring-fill,     .pf-progress[data-variant="success"] .pf-progress-fill     { stroke: var(--success); background: var(--success); }
+.pf-ring[data-variant="warning"] .pf-ring-fill,     .pf-progress[data-variant="warning"] .pf-progress-fill     { stroke: var(--warning); background: var(--warning); }
+.pf-ring[data-variant="destructive"] .pf-ring-fill, .pf-progress[data-variant="destructive"] .pf-progress-fill { stroke: var(--destructive); background: var(--destructive); }
+.pf-ring[data-variant="info"] .pf-ring-fill,        .pf-progress[data-variant="info"] .pf-progress-fill        { stroke: var(--info); background: var(--info); }
 
 .pf-form { display: flex; flex-direction: column; gap: 1rem; }
 
-.pf-input-wrapper, .pf-textarea-wrapper, .pf-select-wrapper, .pf-slider-wrapper {
+.pf-labeled, .pf-input-wrapper, .pf-textarea-wrapper, .pf-select-wrapper, .pf-slider-wrapper, .pf-field {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.5rem;
+  min-width: 0;
 }
 
-.pf-input-label {
+.pf-input-label, .pf-field-title {
   font-size: 0.875rem;
   font-weight: 500;
+  line-height: 1.25rem;
 }
+.pf-input-label[data-required]::after, .pf-radio-legend[data-required]::after { content: " *"; color: var(--destructive); }
 
-.pf-input, .pf-textarea, .pf-select {
-  padding: 0.5rem 0.75rem;
+.pf-input, .pf-textarea, .pf-select, .pf-combobox-input, .pf-datatable-search {
+  display: block;
+  width: 100%;
+  min-height: 2.25rem;
+  padding: 0.4375rem 0.75rem;
   border: 1px solid var(--input);
   border-radius: var(--radius-sm);
-  font-size: 0.875rem;
   background: var(--background);
   color: var(--foreground);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  box-shadow: var(--shadow-sm);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
-.pf-input:focus, .pf-textarea:focus, .pf-select:focus {
-  outline: 2px solid var(--ring);
-  outline-offset: -1px;
+:is(.pf-input, .pf-textarea, .pf-combobox-input, .pf-datatable-search)::placeholder {
+  color: var(--muted-foreground);
+  opacity: 1;
+}
+:is(.pf-input, .pf-textarea, .pf-select, .pf-combobox-input, .pf-datatable-search):focus-visible {
+  outline: none;
   border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
+}
+:is(.pf-input, .pf-textarea, .pf-select, .pf-combobox-input)[aria-invalid="true"] { border-color: var(--destructive); }
+:is(.pf-input, .pf-textarea, .pf-select, .pf-combobox-input)[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 25%, transparent);
 }
+:is(.pf-input, .pf-textarea, .pf-select, .pf-combobox-input):disabled { opacity: 0.5; cursor: not-allowed; }
 .pf-textarea { min-height: 5rem; resize: vertical; }
+.pf-datatable-search { max-width: 20rem; }
+.pf-input[type="date"] { cursor: text; }
+.pf-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
+.pf-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
+
+.pf-select:not([multiple]) {
+  appearance: none;
+  padding-right: 2.25rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
+    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
+  background-position: calc(100% - 1.125rem) 52%, calc(100% - 0.8125rem) 52%;
+  background-size: 0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.pf-select[multiple] { padding: 0.25rem; }
+.pf-select[multiple] option { padding: 0.375rem 0.5rem; border-radius: calc(var(--radius-sm) - 2px); }
+.pf-select-group { display: contents; }
+.pf-select-label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.25rem 0; }
 
-/* Buttons */
 .pf-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: none;
+  flex-shrink: 0;
+  height: 2.25rem;
+  padding: 0 1rem;
+  border: 1px solid transparent;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s, background-color 0.15s;
+  line-height: 1;
   white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.pf-button:hover { opacity: 0.9; }
-.pf-button:active { opacity: 0.8; }
 .pf-button:disabled { opacity: 0.5; cursor: not-allowed; }
+.pf-button:active:not(:disabled) { transform: translateY(0.5px); }
 
-.pf-button[data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); }
+.pf-button[data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
 .pf-button[data-variant="secondary"]   { background: var(--secondary); color: var(--secondary-foreground); }
-.pf-button[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
+.pf-button[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); box-shadow: var(--shadow-sm); }
+.pf-button[data-variant="outline"]     { background: var(--background); color: var(--foreground); border-color: var(--input); box-shadow: var(--shadow-sm); }
 .pf-button[data-variant="ghost"]       { background: transparent; color: var(--foreground); }
-.pf-button[data-variant="ghost"]:hover { background: var(--accent); }
-.pf-button[data-variant="outline"]     { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
-.pf-button[data-variant="outline"]:hover { background: var(--accent); }
-.pf-button[data-variant="link"]        { background: transparent; color: var(--primary); text-decoration: underline; padding: 0; }
+.pf-button[data-variant="link"]        { height: auto; padding: 0; background: transparent; color: var(--primary); text-underline-offset: 4px; }
 
-.pf-button-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.pf-button[data-variant="default"]:hover:not(:disabled)     { background: color-mix(in oklab, var(--primary) 88%, var(--foreground)); }
+.pf-button[data-variant="secondary"]:hover:not(:disabled)   { background: color-mix(in oklab, var(--secondary) 80%, var(--foreground)); }
+.pf-button[data-variant="destructive"]:hover:not(:disabled) { background: color-mix(in oklab, var(--destructive) 88%, var(--foreground)); }
+.pf-button[data-variant="outline"]:hover:not(:disabled),
+.pf-button[data-variant="ghost"]:hover:not(:disabled)       { background: var(--muted); }
+.pf-button[data-variant="link"]:hover:not(:disabled)        { text-decoration: underline; }
 
-/* Checkbox, Switch, Slider, Radio */
-.pf-checkbox-wrapper, .pf-switch-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-.pf-checkbox, .pf-switch { accent-color: var(--primary); }
+.pf-button[data-size="sm"]   { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; gap: 0.375rem; }
+.pf-button[data-size="lg"]   { height: 2.75rem; padding: 0 1.5rem; font-size: 0.9375rem; border-radius: var(--radius); }
+.pf-button[data-size="icon"] { width: 2.25rem; padding: 0; }
 
-.pf-slider { width: 100%; accent-color: var(--primary); }
+.pf-button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
 
-.pf-radio {
-  display: flex;
+.pf-checkbox-wrapper, .pf-switch-wrapper, .pf-radio {
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  align-self: flex-start;
+  gap: 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   cursor: pointer;
+  user-select: none;
 }
-.pf-radio-label { font-size: 0.875rem; }
-.pf-radio-group {
-  border: none;
-  padding: 0;
+.pf-checkbox, .pf-radio-input {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  accent-color: var(--primary);
+  cursor: pointer;
 }
 
-/* Select separator */
-.pf-select-group  { }
-.pf-select-label  { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.25rem 0; }
+.pf-switch {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 1.25rem;
+  margin: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--input) 65%, var(--muted-foreground));
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.pf-switch::before {
+  content: "";
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transition: transform 0.2s;
+}
+.pf-switch:checked { background: var(--primary); }
+.pf-switch:checked::before { transform: translateX(1rem); }
+.pf-switch:disabled, .pf-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }
 
-/* Field */
-.pf-field {
+.pf-radio-group {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.625rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
 }
-.pf-field-title       { font-size: 0.875rem; font-weight: 500; }
-.pf-field-description { font-size: 0.75rem; color: var(--muted-foreground); }
-.pf-field-content     { }
-.pf-field-error       { font-size: 0.75rem; color: var(--destructive); }
-
-/* Combobox */
-.pf-combobox { position: relative; }
-.pf-combobox-input {
+.pf-radio-legend {
+  float: left;
   width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--input);
-  border-radius: var(--radius-sm);
+  margin-bottom: 0.125rem;
+  padding: 0;
   font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+.pf-radio-legend + * { clear: both; }
+
+.pf-slider {
+  appearance: none;
+  width: 100%;
+  height: 1.25rem;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.pf-slider::-webkit-slider-runnable-track {
+  height: 0.375rem;
+  border-radius: 9999px;
+  background:
+    linear-gradient(var(--primary), var(--primary)) 0 / var(--pf-fill, 50%) 100% no-repeat,
+    var(--muted);
+}
+.pf-slider::-moz-range-track { height: 0.375rem; border-radius: 9999px; background: var(--muted); }
+.pf-slider::-moz-range-progress { height: 0.375rem; border-radius: 9999px; background: var(--primary); }
+.pf-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.3125rem;
+  border: 2px solid var(--primary);
+  border-radius: 50%;
   background: var(--background);
-  color: var(--foreground);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.15s;
 }
-.pf-combobox-input:focus {
-  outline: 2px solid var(--ring);
-  outline-offset: -1px;
+.pf-slider::-moz-range-thumb {
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2px solid var(--primary);
+  border-radius: 50%;
+  background: var(--background);
 }
+.pf-slider:focus-visible { outline: none; }
+.pf-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 30%, transparent); }
+.pf-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 30%, transparent); }
+
+.pf-field-description { font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted-foreground); }
+.pf-field-content     { display: flex; flex-direction: column; gap: 0.5rem; }
+.pf-field-error       { margin: 0; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--destructive); }
+
+.pf-combobox { position: relative; }
 .pf-combobox-dropdown {
   position: absolute;
-  top: 100%;
+  top: calc(100% + 0.25rem);
   left: 0;
   right: 0;
   z-index: 50;
-  margin-top: 0.25rem;
+  max-height: 15rem;
+  overflow-y: auto;
+  padding: 0.25rem;
   background: var(--popover);
   color: var(--popover-foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
-  max-height: 15rem;
-  overflow-y: auto;
+  box-shadow: var(--shadow-md);
+  animation: pf-pop-in 0.12s ease-out;
 }
 .pf-combobox-option {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--radius-sm) - 2px);
   font-size: 0.875rem;
+  cursor: pointer;
 }
-.pf-combobox-option:hover { background: var(--accent); }
-.pf-combobox-group { }
-.pf-combobox-label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.5rem 0.75rem 0.25rem; }
+.pf-combobox-option:hover, .pf-combobox-option[aria-selected="true"] { background: var(--muted); }
+.pf-combobox-label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.375rem 0.5rem 0.25rem; }
+.pf-combobox-dropdown .pf-separator, .pf-select-wrapper .pf-separator { margin: 0.25rem -0.25rem; width: auto; }
 
-/* Calendar & DatePicker */
-.pf-calendar {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 0.75rem;
-  font-size: 0.875rem;
-}
-.pf-datepicker {
+.pf-calendar, .pf-datepicker { display: flex; flex-direction: column; gap: 0.5rem; }
+
+.pf-choice-card {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.25rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
 }
+.pf-choice-card:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
+.pf-choice-card[data-selected="true"] {
+  border-color: var(--primary);
+  background: color-mix(in oklab, var(--primary) 6%, var(--card));
+  box-shadow: 0 0 0 1px var(--primary);
+}
+.pf-choice-card-label       { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
+.pf-choice-card-description { font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted-foreground); }
 
-/* ChoiceCard */
-.pf-choice-card {
-  border: 2px solid var(--border);
+.pf-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem 1.5rem;
+  border: 1.5px dashed var(--input);
   border-radius: var(--radius);
-  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
   cursor: pointer;
-  transition: border-color 0.15s, background-color 0.15s;
+  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
+}
+.pf-dropzone:hover, .pf-dropzone.pf-dropzone--active {
+  border-color: var(--primary);
+  background: color-mix(in oklab, var(--primary) 5%, transparent);
+  color: var(--foreground);
 }
-.pf-choice-card:hover { border-color: var(--ring); }
-.pf-choice-card-label       { font-weight: 500; }
-.pf-choice-card-description { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   12. TABS
-   ═══════════════════════════════════════════════════════════════════════════ */
 
-.pf-tabs { }
+.pf-tabs { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
 .pf-tabs-bar {
   display: flex;
-  gap: 0;
+  gap: 0.25rem;
+  overflow-x: auto;
   border-bottom: 1px solid var(--border);
-  margin-bottom: 1rem;
+  scrollbar-width: none;
 }
 .pf-tab-trigger {
-  padding: 0.5rem 1rem;
+  flex-shrink: 0;
+  margin-bottom: -1px;
+  padding: 0.5rem 0.875rem;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--muted-foreground);
   font-size: 0.875rem;
   font-weight: 500;
+  line-height: 1.25rem;
+  white-space: nowrap;
   cursor: pointer;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--muted-foreground);
   transition: color 0.15s, border-color 0.15s;
 }
 .pf-tab-trigger:hover { color: var(--foreground); }
@@ -716,12 +962,8 @@
   color: var(--foreground);
   border-bottom-color: var(--primary);
 }
-.pf-tab-panel { }
-.pf-tab { }
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   13. ACCORDION
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-tab-trigger:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
+.pf-tab-panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }
 
 .pf-accordion { display: flex; flex-direction: column; }
 .pf-accordion-item { border-bottom: 1px solid var(--border); }
@@ -729,215 +971,205 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 1rem;
   width: 100%;
   padding: 1rem 0;
+  border: 0;
+  background: transparent;
   font-size: 0.875rem;
   font-weight: 500;
-  cursor: pointer;
-  background: transparent;
-  border: none;
+  line-height: 1.25rem;
   text-align: left;
-  color: var(--foreground);
+  cursor: pointer;
 }
-.pf-accordion-trigger:hover { text-decoration: underline; }
-.pf-accordion-content { padding-bottom: 1rem; }
+.pf-accordion-trigger:hover { text-decoration: underline; text-underline-offset: 4px; }
+.pf-accordion-trigger::after {
+  content: "";
+  flex-shrink: 0;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  margin-right: 0.25rem;
+  border-right: 1.5px solid var(--muted-foreground);
+  border-bottom: 1.5px solid var(--muted-foreground);
+  transform: translateY(-25%) rotate(45deg);
+  transition: transform 0.2s;
+}
+.pf-accordion-trigger[aria-expanded="true"]::after { transform: translateY(25%) rotate(-135deg); }
+.pf-accordion-trigger:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
+.pf-accordion-content { padding-bottom: 1rem; font-size: 0.875rem; line-height: 1.5rem; }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   14. DIALOG
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-carousel { position: relative; overflow: hidden; border-radius: var(--radius); }
+.pf-carousel-track {
+  display: flex;
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.pf-carousel-track > * { flex: 0 0 100%; min-width: 0; }
+.pf-carousel-prev,
+.pf-carousel-next {
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0 0 0.125rem;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  background: color-mix(in oklab, var(--background) 85%, transparent);
+  color: var(--foreground);
+  font-size: 1.25rem;
+  line-height: 1;
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(4px);
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: opacity 0.15s, background-color 0.15s;
+}
+.pf-carousel-prev { left: 0.5rem; }
+.pf-carousel-next { right: 0.5rem; }
+.pf-carousel-prev:hover:not(:disabled),
+.pf-carousel-next:hover:not(:disabled) { background: var(--muted); }
+.pf-carousel-prev:disabled,
+.pf-carousel-next:disabled { opacity: 0; pointer-events: none; }
 
-.pf-dialog-wrapper { }
 .pf-dialog {
+  position: fixed;
+  width: calc(100% - 2rem);
+  max-width: 32rem;
+  max-height: calc(100% - 2rem);
+  overflow-y: auto;
+  padding: 1.5rem;
   background: var(--card);
   color: var(--card-foreground);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-  max-width: 32rem;
-  width: 90vw;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-sans);
+  line-height: 1.5;
 }
+.pf-dialog[open] { animation: pf-dialog-in 0.16s ease-out; }
 .pf-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 0.55);
+  backdrop-filter: blur(2px);
+  animation: pf-fade-in 0.16s ease-out;
+}
+.pf-dialog-title { margin: 0 0 0.375rem; padding-right: 2rem; font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -0.01em; }
+.pf-dialog-desc  { margin: 0 0 1.25rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
+.pf-dialog-body  { display: flex; flex-direction: column; gap: 1rem; }
+.pf-dialog-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
 }
-.pf-dialog-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; }
-.pf-dialog-desc  { margin: 0 0 1rem; color: var(--muted-foreground); font-size: 0.875rem; }
-.pf-dialog-body  { }
+.pf-dialog-close:hover { color: var(--foreground); background: var(--muted); }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   15. POPOVER, TOOLTIP, HOVER CARD
-   ═══════════════════════════════════════════════════════════════════════════ */
+.pf-popover, .pf-tooltip, .pf-hover-card { position: relative; display: inline-block; }
 
-.pf-popover { position: relative; display: inline-block; }
-.pf-popover-content {
+.pf-popover-content, .pf-hover-card-content {
   position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
   z-index: 50;
   min-width: 12rem;
-  padding: 1rem;
+  max-width: min(20rem, calc(100vw - 2rem));
+  padding: 0.875rem 1rem;
   background: var(--popover);
   color: var(--popover-foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
+  box-shadow: var(--shadow-md);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  animation: pf-pop-in 0.12s ease-out;
 }
-.pf-popover-title { font-weight: 600; margin-bottom: 0.5rem; }
+.pf-hover-card-content { min-width: 16rem; }
+.pf-hover-card-content::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: 0.5rem;
+}
+.pf-popover-title { margin-bottom: 0.375rem; font-weight: 600; }
 
-.pf-tooltip { position: relative; display: inline-block; }
 .pf-tooltip-content {
   position: absolute;
-  z-index: 50;
-  bottom: 100%;
+  bottom: calc(100% + 0.375rem);
   left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 0.5rem;
-  padding: 0.375rem 0.75rem;
+  z-index: 50;
+  padding: 0.375rem 0.625rem;
   background: var(--foreground);
   color: var(--background);
   border-radius: var(--radius-sm);
   font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
   white-space: nowrap;
   pointer-events: none;
+  transform: translateX(-50%);
+  animation: pf-tooltip-in 0.12s ease-out;
 }
 
-.pf-hover-card { position: relative; display: inline-block; }
-.pf-hover-card-content {
-  position: absolute;
-  z-index: 50;
-  min-width: 16rem;
-  padding: 1rem;
-  background: var(--card);
-  color: var(--card-foreground);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   16. CAROUSEL
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-.pf-carousel { position: relative; overflow: hidden; }
-.pf-carousel-track {
-  display: flex;
-  transition: transform 0.3s ease;
-}
-.pf-carousel-track > * { flex: 0 0 100%; min-width: 0; }
-
-.pf-carousel-prev,
-.pf-carousel-next {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: var(--card);
-  color: var(--foreground);
-  cursor: pointer;
-  font-size: 1rem;
-}
-.pf-carousel-prev { left: 0.5rem; }
-.pf-carousel-next { right: 0.5rem; }
-.pf-carousel-prev:hover,
-.pf-carousel-next:hover { background: var(--accent); }
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   17. CHARTS
-   ═══════════════════════════════════════════════════════════════════════════ */
+@keyframes pf-fade-in   { from { opacity: 0; } }
+@keyframes pf-pop-in    { from { opacity: 0; transform: translateY(-0.25rem); } }
+@keyframes pf-tooltip-in { from { opacity: 0; transform: translate(-50%, 0.25rem); } }
+@keyframes pf-dialog-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }
 
-.pf-chart { position: relative; }
-.pf-chart svg { display: block; width: 100%; height: auto; }
+.pf-chart { position: relative; min-width: 0; }
+.pf-chart svg { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
+.pf-chart text { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
 
 .pf-chart-tooltip {
   position: absolute;
   pointer-events: none;
   z-index: 50;
-  background: var(--popover, #fff);
-  color: var(--popover-foreground, #09090b);
-  border: 1px solid var(--border, #e5e7eb);
-  border-radius: var(--radius, 0.375rem);
+  background: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
   line-height: 1.25rem;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+  box-shadow: var(--shadow-md);
   white-space: nowrap;
   opacity: 0;
   transition: opacity 0.15s ease;
 }
 .pf-chart-tooltip.pf-visible { opacity: 1; }
-.pf-chart-tooltip-label { font-weight: 500; margin-bottom: 0.125rem; }
-.pf-chart-tooltip-row { display: flex; align-items: center; gap: 0.375rem; }
-.pf-chart-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.pf-chart-tooltip-label { font-weight: 600; margin-bottom: 0.125rem; }
+.pf-chart-tooltip-row { display: flex; align-items: center; gap: 0.375rem; font-variant-numeric: tabular-nums; }
+.pf-chart-tooltip-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
 
-.pf-chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.75rem; }
+.pf-chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
 .pf-chart-legend-item { display: flex; align-items: center; gap: 0.375rem; }
+.pf-chart-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex-shrink: 0; }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   18. MEDIA
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-.pf-image { max-width: 100%; height: auto; display: block; }
+.pf-image { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
 .pf-audio { width: 100%; }
-.pf-video { max-width: 100%; height: auto; display: block; }
-.pf-embed { position: relative; overflow: hidden; }
-.pf-embed iframe { border: none; }
+.pf-video { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
+.pf-embed { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
+.pf-embed iframe { display: block; width: 100%; border: none; }
 .pf-svg { display: inline-block; }
 .pf-mermaid { overflow-x: auto; }
 
-.pf-dropzone {
-  border: 2px dashed var(--border);
-  border-radius: var(--radius);
-  padding: 2rem;
-  text-align: center;
-  color: var(--muted-foreground);
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-.pf-dropzone:hover, .pf-dropzone.pf-dropzone--active {
-  border-color: var(--primary);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   19. TOAST
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-.pf-toast {
-  background: var(--card);
-  color: var(--card-foreground);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1rem;
-  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
-  max-width: 24rem;
-}
-.pf-toast--success {
-  border-color: var(--success, #22c55e);
-  background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--card));
-}
-.pf-toast--error {
-  border-color: var(--destructive);
-  background: color-mix(in srgb, var(--destructive) 10%, var(--card));
-}
-.pf-toast--warning {
-  border-color: var(--warning, #f59e0b);
-  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--card));
-}
-.pf-toast--info {
-  border-color: var(--primary);
-  background: color-mix(in srgb, var(--primary) 10%, var(--card));
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   20. UTILITY — Tailwind-compatible helpers for cssClass
-   ═══════════════════════════════════════════════════════════════════════════
-   All classes used by auto-renderers and builders are defined here so the
-   bundle works without Tailwind.  The scale mirrors Tailwind's default
-   spacing (1 unit = 0.25rem) and typography tokens.
-   ═══════════════════════════════════════════════════════════════════════════ */
+/* Tailwind-compatible helpers for cssClass, so the bundle works without Tailwind. */
 
 /* ── Display ──────────────────────────────────────────────────────────────── */