@maxhealth.tech/prefab 0.1.6 → 0.1.9

package/dist/prefab.css

@@ -0,0 +1,803 @@
+/*
+ * 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
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:root {
+  /* Radii */
+  --radius: 8px;
+  --radius-sm: 6px;
+
+  /* Core palette */
+  --background: #ffffff;
+  --foreground: #09090b;
+
+  --card: #ffffff;
+  --card-foreground: #09090b;
+
+  --popover: #ffffff;
+  --popover-foreground: #09090b;
+
+  --primary: #3b82f6;
+  --primary-foreground: #ffffff;
+
+  --secondary: #f3f4f6;
+  --secondary-foreground: #1f2937;
+
+  --muted: #f3f4f6;
+  --muted-foreground: #6b7280;
+
+  --accent: #eff6ff;
+  --accent-foreground: #1e40af;
+
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+
+  --success: #22c55e;
+  --success-foreground: #ffffff;
+
+  --warning: #f59e0b;
+  --warning-foreground: #ffffff;
+
+  --border: #e5e7eb;
+  --input: #e5e7eb;
+  --ring: #3b82f6;
+
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #09090b;
+    --foreground: #fafafa;
+
+    --card: #111113;
+    --card-foreground: #fafafa;
+
+    --popover: #111113;
+    --popover-foreground: #fafafa;
+
+    --primary: #60a5fa;
+    --primary-foreground: #09090b;
+
+    --secondary: #1f2937;
+    --secondary-foreground: #f3f4f6;
+
+    --muted: #1f2937;
+    --muted-foreground: #9ca3af;
+
+    --accent: #1e3a5f;
+    --accent-foreground: #93c5fd;
+
+    --destructive: #f87171;
+    --destructive-foreground: #09090b;
+
+    --success: #4ade80;
+    --success-foreground: #09090b;
+
+    --warning: #fbbf24;
+    --warning-foreground: #09090b;
+
+    --border: #27272a;
+    --input: #27272a;
+    --ring: #60a5fa;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. RESET & BASE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.pf-app-root {
+  font-family: var(--font-sans);
+  color: var(--foreground);
+  background-color: var(--background);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. LAYOUT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-column { display: flex; flex-direction: column; }
+.pf-row    { display: flex; flex-direction: row; flex-wrap: wrap; }
+.pf-grid   { display: grid; }
+
+.pf-grid-item { min-width: 0; }
+.pf-container { width: 100%; max-width: 1200px; margin: 0 auto; }
+.pf-div  { display: block; }
+.pf-span { display: inline; }
+.pf-pages { position: relative; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. TYPOGRAPHY
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-heading { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
+.pf-h1 { font-size: 2.25rem; line-height: 2.5rem; }
+.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-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-blockquote {
+  margin: 0;
+  padding-left: 1rem;
+  border-left: 3px solid var(--border);
+  font-style: italic;
+  color: var(--muted-foreground);
+}
+
+.pf-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.pf-link {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  cursor: pointer;
+}
+.pf-link:hover { text-decoration-thickness: 2px; }
+
+.pf-code {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 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 p { margin: 0.75em 0; }
+.pf-markdown code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--muted);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+.pf-markdown pre code { background: none; padding: 0; }
+
+.pf-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  min-width: 1.5em;
+  padding: 0.15em 0.4em;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--muted);
+  box-shadow: 0 1px 0 var(--border);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. CARD
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-card {
+  background: var(--card);
+  color: var(--card-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.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-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; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   6. ALERT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-alert {
+  position: relative;
+  padding: 1rem 1rem 1rem 3rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.pf-alert[data-variant="destructive"] {
+  border-color: var(--destructive);
+  color: var(--destructive);
+}
+.pf-alert-icon {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+}
+.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-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.15em 0.6em;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background-color 0.15s;
+}
+.pf-badge[data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); }
+.pf-badge[data-variant="secondary"]   { background: var(--secondary); color: var(--secondary-foreground); }
+.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-dot {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   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-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-progress {
+  width: 100%;
+  height: 0.5rem;
+  background: var(--muted);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+.pf-progress-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+.pf-separator {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 0;
+}
+
+.pf-loader {
+  display: inline-block;
+  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;
+}
+@keyframes pf-spin { to { transform: rotate(360deg); } }
+
+.pf-icon { display: inline-flex; align-items: center; }
+
+.pf-sparkline svg { display: block; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   9. DATATABLE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-datatable-wrapper { overflow-x: auto; }
+
+.pf-datatable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.pf-datatable-th {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  border-bottom: 2px solid var(--border);
+  white-space: nowrap;
+}
+.pf-datatable-td {
+  padding: 0.75rem 1rem;
+  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;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. TABLE (semantic HTML table)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.pf-table-row { }
+.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-table-caption {
+  caption-side: bottom;
+  padding: 0.5rem;
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+}
+
+.pf-expandable-row { }
+.pf-expandable-row-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+.pf-expandable-arrow {
+  display: inline-block;
+  transition: transform 0.2s;
+}
+.pf-expandable-row-detail {
+  padding-left: 1.5rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   11. FORM
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-form { display: flex; flex-direction: column; gap: 1rem; }
+
+.pf-input-wrapper, .pf-textarea-wrapper, .pf-select-wrapper, .pf-slider-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.pf-input-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.pf-input, .pf-textarea, .pf-select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  background: var(--background);
+  color: var(--foreground);
+  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;
+  border-color: var(--ring);
+}
+.pf-textarea { min-height: 5rem; resize: vertical; }
+
+/* Buttons */
+.pf-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s, background-color 0.15s;
+  white-space: nowrap;
+}
+.pf-button:hover { opacity: 0.9; }
+.pf-button:active { opacity: 0.8; }
+.pf-button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.pf-button[data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); }
+.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="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-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+
+/* 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-slider { width: 100%; accent-color: var(--primary); }
+
+.pf-radio {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.pf-radio-label { font-size: 0.875rem; }
+.pf-radio-group {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Select separator */
+.pf-select-group  { }
+.pf-select-label  { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.25rem 0; }
+
+/* Field */
+.pf-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.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 {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  background: var(--background);
+  color: var(--foreground);
+}
+.pf-combobox-input:focus {
+  outline: 2px solid var(--ring);
+  outline-offset: -1px;
+}
+.pf-combobox-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  margin-top: 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;
+}
+.pf-combobox-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+.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; }
+
+/* Calendar & DatePicker */
+.pf-calendar {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
+  font-size: 0.875rem;
+}
+.pf-datepicker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* ChoiceCard */
+.pf-choice-card {
+  border: 2px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+.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-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 1rem;
+}
+.pf-tab-trigger {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  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); }
+.pf-tab-trigger[aria-selected="true"] {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+}
+.pf-tab-panel { }
+.pf-tab { }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   13. ACCORDION
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-accordion { display: flex; flex-direction: column; }
+.pf-accordion-item { border-bottom: 1px solid var(--border); }
+.pf-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  text-align: left;
+  color: var(--foreground);
+}
+.pf-accordion-trigger:hover { text-decoration: underline; }
+.pf-accordion-content { padding-bottom: 1rem; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   14. DIALOG
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-dialog-wrapper { }
+.pf-dialog {
+  background: var(--card);
+  color: var(--card-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  max-width: 32rem;
+  width: 90vw;
+}
+.pf-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+.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  { }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   15. POPOVER, TOOLTIP, HOVER CARD
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-popover { position: relative; display: inline-block; }
+.pf-popover-content {
+  position: absolute;
+  z-index: 50;
+  min-width: 12rem;
+  padding: 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);
+}
+.pf-popover-title { font-weight: 600; margin-bottom: 0.5rem; }
+
+.pf-tooltip { position: relative; display: inline-block; }
+.pf-tooltip-content {
+  position: absolute;
+  z-index: 50;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--foreground);
+  color: var(--background);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.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
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-chart { position: relative; }
+.pf-chart svg { display: block; width: 100%; height: auto; }
+
+.pf-chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.75rem; }
+.pf-chart-legend-item { display: flex; align-items: center; gap: 0.375rem; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   18. MEDIA
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pf-image { max-width: 100%; height: auto; display: block; }
+.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-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;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   20. UTILITY — Tailwind-style gap/padding helpers used in cssClass
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gap-0  { gap: 0;      } .gap-1  { gap: 0.25rem; } .gap-2  { gap: 0.5rem;  }
+.gap-3  { gap: 0.75rem;} .gap-4  { gap: 1rem;    } .gap-5  { gap: 1.25rem; }
+.gap-6  { gap: 1.5rem; } .gap-8  { gap: 2rem;    } .gap-10 { gap: 2.5rem;  }
+
+.p-0  { padding: 0;      } .p-1  { padding: 0.25rem; } .p-2  { padding: 0.5rem;  }
+.p-3  { padding: 0.75rem;} .p-4  { padding: 1rem;    } .p-5  { padding: 1.25rem; }
+.p-6  { padding: 1.5rem; } .p-8  { padding: 2rem;    } .p-10 { padding: 2.5rem;  }
+
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-4 { padding-top: 1rem;   padding-bottom: 1rem; }
+
+.w-40 { width: 10rem; }
+.max-w-2xl { max-width: 42rem; }
+
+.shrink-0       { flex-shrink: 0; }
+.font-medium    { font-weight: 500; }
+.font-semibold  { font-weight: 600; }
+.tabular-nums   { font-variant-numeric: tabular-nums; }
+.text-muted-foreground { color: var(--muted-foreground); }