@kopexa/theme 17.9.0 → 17.11.0

package/dist/components/index.js

@@ -52,6 +52,7 @@ __export(components_exports, {
   heading: () => heading,
   hoverCard: () => hoverCard,
   imageCrop: () => imageCrop,
+  imagePlaceholder: () => imagePlaceholder,
   impactCard: () => impactCard,
   input: () => input,
   inputGroup: () => inputGroup,
@@ -89,6 +90,7 @@ __export(components_exports, {
   table: () => table,
   tabs: () => tabs,
   textarea: () => textarea,
+  toc: () => toc,
   toolbar: () => toolbar,
   tooltip: () => tooltip
 });
@@ -2366,8 +2368,21 @@ var editorBasic = (0, import_tailwind_variants26.tv)({
       },
       // document style, eg. document editor, fullpage etc pp
       document: {
-        wrapper: "size-full overflow-auto",
-        content: "size-full"
+        root: "h-full min-h-0 flex flex-col overflow-hidden",
+        toolbarContainer: ["shrink-0", "border-b bg-background", "px-4"],
+        wrapper: ["flex-1 min-h-0 overflow-auto", "bg-muted/30"],
+        content: [
+          // Centered paper effect
+          "mx-auto",
+          "w-full max-w-[816px]",
+          "min-h-full",
+          "bg-background",
+          "shadow-lg",
+          // ProseMirror styling
+          "[&_.tiptap.ProseMirror]:py-16",
+          "[&_.tiptap.ProseMirror]:px-16",
+          "[&_.tiptap.ProseMirror]:min-h-full"
+        ]
       },
       comment: {
         root: "",
@@ -2378,11 +2393,78 @@ var editorBasic = (0, import_tailwind_variants26.tv)({
         ],
         toolbarContainer: "rounded-md mb-2",
         content: ""
+      },
+      // Form field style - compact with bottom toolbar
+      field: {
+        root: [
+          "grid grid-rows-[minmax(0,1fr),auto]",
+          // content first, toolbar second
+          "transition-shadow"
+        ],
+        wrapper: [
+          "row-start-1 row-end-2",
+          "max-h-[12lh]",
+          // ~12 lines max
+          "min-h-[4lh]",
+          // ~4 lines min
+          "overflow-y-auto",
+          "flex flex-col"
+          // stretch content
+        ],
+        toolbarContainer: [
+          "row-start-2 row-end-3",
+          "border-t bg-muted/30",
+          "sticky bottom-0",
+          "py-1 px-2"
+        ],
+        content: [
+          "flex-1",
+          // fill available space
+          "[&_.tiptap.ProseMirror]:py-3",
+          "[&_.tiptap.ProseMirror]:px-3",
+          "[&_.tiptap.ProseMirror]:text-sm",
+          "[&_.tiptap.ProseMirror]:min-h-full",
+          // editor fills container
+          "[&_.tiptap.ProseMirror]:cursor-text"
+          // show text cursor
+        ]
       }
+    },
+    bordered: {
+      true: {},
+      false: {}
     }
   },
+  compoundVariants: [
+    // Field with border (default for editable)
+    {
+      variant: "field",
+      bordered: true,
+      class: {
+        root: [
+          "border rounded-md",
+          "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+        ]
+      }
+    },
+    // Field without border (for read-only in cards)
+    {
+      variant: "field",
+      bordered: false,
+      class: {
+        root: "border-0",
+        wrapper: "min-h-0",
+        // remove min-height constraint for read-only
+        content: [
+          "[&_.tiptap.ProseMirror]:py-0",
+          "[&_.tiptap.ProseMirror]:px-0"
+        ]
+      }
+    }
+  ],
   defaultVariants: {
-    variant: "default"
+    variant: "default",
+    bordered: true
   }
 });
 
@@ -2613,9 +2695,68 @@ var imageCrop = (0, import_tailwind_variants33.tv)({
   }
 });
 
-// src/components/impact-card.ts
+// src/components/image-placeholder.ts
 var import_tailwind_variants34 = require("tailwind-variants");
-var impactCard = (0, import_tailwind_variants34.tv)({
+var imagePlaceholder = (0, import_tailwind_variants34.tv)({
+  slots: {
+    root: [
+      "relative flex items-center justify-center",
+      "rounded-lg border-2 border-dashed",
+      "transition-colors cursor-pointer"
+    ],
+    content: "flex flex-col items-center gap-2 pointer-events-none",
+    icon: "text-muted-foreground",
+    text: "text-muted-foreground",
+    hint: "text-muted-foreground",
+    removeButton: "absolute top-2 right-2"
+  },
+  variants: {
+    size: {
+      sm: {
+        root: "min-h-24 py-4 px-6",
+        icon: "size-6",
+        text: "text-xs",
+        hint: "text-[10px]"
+      },
+      md: {
+        root: "min-h-32 py-6 px-8",
+        icon: "size-8",
+        text: "text-sm",
+        hint: "text-xs"
+      },
+      lg: {
+        root: "min-h-40 py-8 px-10",
+        icon: "size-10",
+        text: "text-base",
+        hint: "text-sm"
+      }
+    },
+    variant: {
+      default: {
+        root: "border-border bg-muted/20 hover:border-primary/50 hover:bg-muted/40"
+      },
+      error: {
+        root: "border-destructive/50 bg-destructive/10 cursor-default",
+        icon: "text-destructive",
+        text: "text-destructive"
+      },
+      disabled: {
+        root: "border-border bg-muted/10 cursor-not-allowed opacity-60"
+      },
+      uploading: {
+        root: "border-border bg-muted/30 cursor-wait"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+
+// src/components/impact-card.ts
+var import_tailwind_variants35 = require("tailwind-variants");
+var impactCard = (0, import_tailwind_variants35.tv)({
   slots: {
     // Card wrapper (extends Card.Root)
     root: "",
@@ -2694,8 +2835,8 @@ var impactCard = (0, import_tailwind_variants34.tv)({
 });
 
 // src/components/input-group.ts
-var import_tailwind_variants35 = require("tailwind-variants");
-var inputGroup = (0, import_tailwind_variants35.tv)({
+var import_tailwind_variants36 = require("tailwind-variants");
+var inputGroup = (0, import_tailwind_variants36.tv)({
   base: [
     "flex items-stretch",
     "[&_[data-slot=input]]:grow",
@@ -2716,8 +2857,8 @@ var inputGroup = (0, import_tailwind_variants35.tv)({
 });
 
 // src/components/input-wrapper.ts
-var import_tailwind_variants36 = require("tailwind-variants");
-var inputWrapper = (0, import_tailwind_variants36.tv)({
+var import_tailwind_variants37 = require("tailwind-variants");
+var inputWrapper = (0, import_tailwind_variants37.tv)({
   base: [
     "flex items-center gap-1.5",
     "has-[:focus-visible]:ring-ring/30",
@@ -2761,8 +2902,8 @@ var inputWrapper = (0, import_tailwind_variants36.tv)({
 });
 
 // src/components/integration-card.ts
-var import_tailwind_variants37 = require("tailwind-variants");
-var integrationCard = (0, import_tailwind_variants37.tv)({
+var import_tailwind_variants38 = require("tailwind-variants");
+var integrationCard = (0, import_tailwind_variants38.tv)({
   slots: {
     root: "",
     header: "flex items-start justify-between gap-3",
@@ -2784,8 +2925,8 @@ var integrationCard = (0, import_tailwind_variants37.tv)({
 });
 
 // src/components/kbd.ts
-var import_tailwind_variants38 = require("tailwind-variants");
-var kbd = (0, import_tailwind_variants38.tv)({
+var import_tailwind_variants39 = require("tailwind-variants");
+var kbd = (0, import_tailwind_variants39.tv)({
   base: "inline-flex items-center justify-center font-mono rounded-md",
   variants: {
     variant: {
@@ -2804,8 +2945,8 @@ var kbd = (0, import_tailwind_variants38.tv)({
 });
 
 // src/components/label.ts
-var import_tailwind_variants39 = require("tailwind-variants");
-var label = (0, import_tailwind_variants39.tv)({
+var import_tailwind_variants40 = require("tailwind-variants");
+var label = (0, import_tailwind_variants40.tv)({
   base: [
     "text-sm leading-none",
     "text-foreground",
@@ -2823,8 +2964,8 @@ var label = (0, import_tailwind_variants39.tv)({
 });
 
 // src/components/loading-page.ts
-var import_tailwind_variants40 = require("tailwind-variants");
-var loadingPage = (0, import_tailwind_variants40.tv)({
+var import_tailwind_variants41 = require("tailwind-variants");
+var loadingPage = (0, import_tailwind_variants41.tv)({
   slots: {
     root: "relative isolate flex min-h-screen items-center justify-center px-6 py-10 bg-background",
     container: "flex flex-col items-center gap-4 text-center",
@@ -2844,8 +2985,8 @@ var loadingPage = (0, import_tailwind_variants40.tv)({
 });
 
 // src/components/page-header.ts
-var import_tailwind_variants41 = require("tailwind-variants");
-var pageHeader = (0, import_tailwind_variants41.tv)({
+var import_tailwind_variants42 = require("tailwind-variants");
+var pageHeader = (0, import_tailwind_variants42.tv)({
   slots: {
     root: "page-header",
     titleArea: "page-header__title-area flex gap-2 flex-row items-center",
@@ -2880,8 +3021,8 @@ var pageHeader = (0, import_tailwind_variants41.tv)({
 });
 
 // src/components/page-layout.ts
-var import_tailwind_variants42 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants42.tv)({
+var import_tailwind_variants43 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants43.tv)({
   slots: {
     root: "",
     wrapper: "flex flex-wrap w-full",
@@ -2998,8 +3139,8 @@ var pageLayout = (0, import_tailwind_variants42.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants43 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants43.tv)({
+var import_tailwind_variants44 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants44.tv)({
   slots: {
     content: [
       "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95",
@@ -3047,8 +3188,8 @@ var popover = (0, import_tailwind_variants43.tv)({
 });
 
 // src/components/preview-card.ts
-var import_tailwind_variants44 = require("tailwind-variants");
-var previewCard = (0, import_tailwind_variants44.tv)({
+var import_tailwind_variants45 = require("tailwind-variants");
+var previewCard = (0, import_tailwind_variants45.tv)({
   slots: {
     root: [
       "grid w-full grid-cols-[auto_1fr_auto] items-center gap-y-1.5 rounded-md bg-background p-2",
@@ -3113,8 +3254,8 @@ var previewCard = (0, import_tailwind_variants44.tv)({
 });
 
 // src/components/related-control-chip.ts
-var import_tailwind_variants45 = require("tailwind-variants");
-var relatedControlChip = (0, import_tailwind_variants45.tv)({
+var import_tailwind_variants46 = require("tailwind-variants");
+var relatedControlChip = (0, import_tailwind_variants46.tv)({
   slots: {
     // Container for all chips
     root: "flex flex-wrap items-center gap-1",
@@ -3174,8 +3315,8 @@ var relatedControlChip = (0, import_tailwind_variants45.tv)({
 });
 
 // src/components/resizable.ts
-var import_tailwind_variants46 = require("tailwind-variants");
-var resizable = (0, import_tailwind_variants46.tv)({
+var import_tailwind_variants47 = require("tailwind-variants");
+var resizable = (0, import_tailwind_variants47.tv)({
   slots: {
     root: ["flex h-full w-full data-[panel-group-direction=vertical]:flex-col"],
     panel: [],
@@ -3201,8 +3342,8 @@ var resizable = (0, import_tailwind_variants46.tv)({
 });
 
 // src/components/risk-badge.ts
-var import_tailwind_variants47 = require("tailwind-variants");
-var riskBadge = (0, import_tailwind_variants47.tv)({
+var import_tailwind_variants48 = require("tailwind-variants");
+var riskBadge = (0, import_tailwind_variants48.tv)({
   slots: {
     root: ["inline-flex flex-col items-start gap-0.5"],
     label: ["inline-flex items-center gap-0.5 text-xs"],
@@ -3241,8 +3382,8 @@ var riskBadge = (0, import_tailwind_variants47.tv)({
 });
 
 // src/components/risk-indicator.ts
-var import_tailwind_variants48 = require("tailwind-variants");
-var riskIndicator = (0, import_tailwind_variants48.tv)({
+var import_tailwind_variants49 = require("tailwind-variants");
+var riskIndicator = (0, import_tailwind_variants49.tv)({
   slots: {
     base: "flex items-end gap-0.5",
     bar: "rounded-sm",
@@ -3275,8 +3416,8 @@ var riskIndicator = (0, import_tailwind_variants48.tv)({
 });
 
 // src/components/risk-rating.ts
-var import_tailwind_variants49 = require("tailwind-variants");
-var riskRating = (0, import_tailwind_variants49.tv)({
+var import_tailwind_variants50 = require("tailwind-variants");
+var riskRating = (0, import_tailwind_variants50.tv)({
   slots: {
     base: "flex items-center gap-2",
     badge: "flex items-center justify-center rounded-md font-bold",
@@ -3336,8 +3477,8 @@ var riskRating = (0, import_tailwind_variants49.tv)({
 });
 
 // src/components/scroll-area.ts
-var import_tailwind_variants50 = require("tailwind-variants");
-var scrollArea = (0, import_tailwind_variants50.tv)({
+var import_tailwind_variants51 = require("tailwind-variants");
+var scrollArea = (0, import_tailwind_variants51.tv)({
   slots: {
     root: "relative",
     viewport: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
@@ -3351,8 +3492,8 @@ var scrollArea = (0, import_tailwind_variants50.tv)({
 });
 
 // src/components/section-row.ts
-var import_tailwind_variants51 = require("tailwind-variants");
-var sectionRow = (0, import_tailwind_variants51.tv)({
+var import_tailwind_variants52 = require("tailwind-variants");
+var sectionRow = (0, import_tailwind_variants52.tv)({
   slots: {
     root: ["grid grid-cols-1 text-base/6 sm:text-sm/6", "w-full"],
     title: [
@@ -3423,8 +3564,8 @@ var sectionRow = (0, import_tailwind_variants51.tv)({
 });
 
 // src/components/select.ts
-var import_tailwind_variants52 = require("tailwind-variants");
-var select = (0, import_tailwind_variants52.tv)({
+var import_tailwind_variants53 = require("tailwind-variants");
+var select = (0, import_tailwind_variants53.tv)({
   slots: {
     trigger: [
       "w-full",
@@ -3528,8 +3669,8 @@ var select = (0, import_tailwind_variants52.tv)({
 });
 
 // src/components/separator.ts
-var import_tailwind_variants53 = require("tailwind-variants");
-var separator = (0, import_tailwind_variants53.tv)({
+var import_tailwind_variants54 = require("tailwind-variants");
+var separator = (0, import_tailwind_variants54.tv)({
   base: [
     "bg-border shrink-0",
     "data-[orientation=horizontal]:h-px",
@@ -3547,11 +3688,11 @@ var separator = (0, import_tailwind_variants53.tv)({
 });
 
 // src/components/sidebar.ts
-var import_tailwind_variants54 = require("tailwind-variants");
-var sidebar = (0, import_tailwind_variants54.tv)({
+var import_tailwind_variants55 = require("tailwind-variants");
+var sidebar = (0, import_tailwind_variants55.tv)({
   slots: {
     provider: [
-      "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full isolate"
+      "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh w-full isolate overflow-hidden"
     ],
     sidebarWrapper: ["group peer text-sidebar-foreground hidden md:block"],
     sidebar: [
@@ -3578,7 +3719,7 @@ var sidebar = (0, import_tailwind_variants54.tv)({
       "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
     ],
     inset: [
-      "bg-background relative flex w-full flex-1 flex-col",
+      "bg-background relative flex w-full flex-1 flex-col min-h-0",
       "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2"
     ],
     input: ["bg-background h-8 w-full shadow-none"],
@@ -3636,7 +3777,7 @@ var sidebar = (0, import_tailwind_variants54.tv)({
     isMobile: false
   }
 });
-var sidebarMenuButton = (0, import_tailwind_variants54.tv)({
+var sidebarMenuButton = (0, import_tailwind_variants55.tv)({
   base: [
     "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md",
     "p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding]",
@@ -3688,7 +3829,7 @@ var sidebarMenuButton = (0, import_tailwind_variants54.tv)({
     }
   ]
 });
-var sidebarMenuAction = (0, import_tailwind_variants54.tv)({
+var sidebarMenuAction = (0, import_tailwind_variants55.tv)({
   base: [
     "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
@@ -3708,14 +3849,14 @@ var sidebarMenuAction = (0, import_tailwind_variants54.tv)({
 });
 
 // src/components/skeleton.ts
-var import_tailwind_variants55 = require("tailwind-variants");
-var skeleton = (0, import_tailwind_variants55.tv)({
+var import_tailwind_variants56 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants56.tv)({
   base: "bg-accent animate-pulse rounded-md"
 });
 
 // src/components/skeleton-avatar.ts
-var import_tailwind_variants56 = require("tailwind-variants");
-var skeletonAvatar = (0, import_tailwind_variants56.tv)({
+var import_tailwind_variants57 = require("tailwind-variants");
+var skeletonAvatar = (0, import_tailwind_variants57.tv)({
   base: "rounded-full",
   variants: {
     size: {
@@ -3732,11 +3873,11 @@ var skeletonAvatar = (0, import_tailwind_variants56.tv)({
 });
 
 // src/components/slash-dropdown-menu.ts
-var import_tailwind_variants57 = require("tailwind-variants");
-var slashDropdownMenu = (0, import_tailwind_variants57.tv)({
+var import_tailwind_variants58 = require("tailwind-variants");
+var slashDropdownMenu = (0, import_tailwind_variants58.tv)({
   slots: {
     card: [...popoverContentClasses, "p-0", "flex flex-col outline-none"],
-    body: ["p-1.5 flex-auto grow shrink overflow-y-auto w-full"],
+    body: ["p-1.5 flex-auto grow shrink overflow-y-auto w-full bg-popover"],
     cardItemGroup: [
       "relative flex align-middle min-w-max",
       "flex-col justify-center"
@@ -3752,8 +3893,8 @@ var slashDropdownMenu = (0, import_tailwind_variants57.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants58 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants58.tv)({
+var import_tailwind_variants59 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants59.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -3870,27 +4011,22 @@ var spinner = (0, import_tailwind_variants58.tv)({
 });
 
 // src/components/split-page-layout.ts
-var import_tailwind_variants59 = require("tailwind-variants");
-var splitPageLayout = (0, import_tailwind_variants59.tv)({
+var import_tailwind_variants60 = require("tailwind-variants");
+var splitPageLayout = (0, import_tailwind_variants60.tv)({
   slots: {
     root: [
       "size-full min-h-0 grid grid-cols-[1fr_10px] md:grid-cols-3 relative"
     ],
-    content: ["p-4 md:p-6 col-span-1 md:col-span-2"],
+    content: ["col-span-1 md:col-span-2 overflow-hidden"],
+    contentBody: ["p-4 md:p-6 h-full overflow-auto"],
     panelContainer: [
       "flex flex-col",
       "md:border-s",
       //"size-full",
       "bg-muted/50 dark:bg-primary-900"
     ],
-    panel: [
-      //"md:border-s",
-      "p-4 md:p-6",
-      "overflow-y-auto overflow-x-hidden",
-      "flex-1",
-      "min-h-0",
-      "h-full"
-    ],
+    panel: ["overflow-y-auto overflow-x-hidden", "flex-1", "min-h-0", "h-full"],
+    panelBody: ["p-4 md:p-6"],
     bleed: "-mx-4 md:-mx-6",
     mobileWrapper: "relative",
     mobileContainer: ["absolute top-2 right-2 z-10"]
@@ -3908,8 +4044,8 @@ var splitPageLayout = (0, import_tailwind_variants59.tv)({
 });
 
 // src/components/standard-chip.ts
-var import_tailwind_variants60 = require("tailwind-variants");
-var standardChip = (0, import_tailwind_variants60.tv)({
+var import_tailwind_variants61 = require("tailwind-variants");
+var standardChip = (0, import_tailwind_variants61.tv)({
   extend: chip,
   slots: {
     root: [
@@ -4000,8 +4136,8 @@ var standardChip = (0, import_tailwind_variants60.tv)({
 });
 
 // src/components/stat.ts
-var import_tailwind_variants61 = require("tailwind-variants");
-var stat = (0, import_tailwind_variants61.tv)({
+var import_tailwind_variants62 = require("tailwind-variants");
+var stat = (0, import_tailwind_variants62.tv)({
   slots: {
     root: ["flex", "flex-col", "gap-1", "relative", "flex-1"],
     label: [
@@ -4061,8 +4197,8 @@ var stat = (0, import_tailwind_variants61.tv)({
 });
 
 // src/components/switch.ts
-var import_tailwind_variants62 = require("tailwind-variants");
-var switchVariants = (0, import_tailwind_variants62.tv)({
+var import_tailwind_variants63 = require("tailwind-variants");
+var switchVariants = (0, import_tailwind_variants63.tv)({
   slots: {
     root: [
       "peer data-[checked]:bg-primary data-[unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[unchecked]:bg-input/80",
@@ -4097,8 +4233,8 @@ var switchVariants = (0, import_tailwind_variants62.tv)({
 });
 
 // src/components/tab-nav.ts
-var import_tailwind_variants63 = require("tailwind-variants");
-var tabNav = (0, import_tailwind_variants63.tv)({
+var import_tailwind_variants64 = require("tailwind-variants");
+var tabNav = (0, import_tailwind_variants64.tv)({
   slots: {
     base: "",
     list: [
@@ -4188,8 +4324,8 @@ var tabNav = (0, import_tailwind_variants63.tv)({
 });
 
 // src/components/table.ts
-var import_tailwind_variants64 = require("tailwind-variants");
-var table = (0, import_tailwind_variants64.tv)({
+var import_tailwind_variants65 = require("tailwind-variants");
+var table = (0, import_tailwind_variants65.tv)({
   slots: {
     container: ["overflow-x-auto whitespace-nowrap", "-mx-(--gutter)"],
     wrapper: ["inline-block min-w-full align-middle"],
@@ -4351,8 +4487,8 @@ var table = (0, import_tailwind_variants64.tv)({
 });
 
 // src/components/tabs.ts
-var import_tailwind_variants65 = require("tailwind-variants");
-var tabs = (0, import_tailwind_variants65.tv)({
+var import_tailwind_variants66 = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants66.tv)({
   slots: {
     root: "flex flex-col gap-2",
     list: [
@@ -4389,8 +4525,8 @@ var tabs = (0, import_tailwind_variants65.tv)({
 });
 
 // src/components/textarea.ts
-var import_tailwind_variants66 = require("tailwind-variants");
-var textarea = (0, import_tailwind_variants66.tv)({
+var import_tailwind_variants67 = require("tailwind-variants");
+var textarea = (0, import_tailwind_variants67.tv)({
   base: [
     "w-full border border-input bg-background text-foreground shadow-xs shadow-black/5 transition-[color,box-shadow]",
     "text-foreground placeholder:text-muted-foreground/80",
@@ -4413,9 +4549,67 @@ var textarea = (0, import_tailwind_variants66.tv)({
   }
 });
 
+// src/components/toc.ts
+var import_tailwind_variants68 = require("tailwind-variants");
+var toc = (0, import_tailwind_variants68.tv)({
+  slots: {
+    root: ["my-4", "rounded-lg", "border", "bg-muted/30", "p-4"],
+    header: ["flex", "items-center", "justify-between", "gap-2", "mb-3"],
+    headerContent: [
+      "flex",
+      "items-center",
+      "gap-2",
+      "text-sm",
+      "font-medium",
+      "text-muted-foreground"
+    ],
+    headerIcon: ["size-4"],
+    headerTitle: [],
+    headerActions: ["flex", "items-center", "gap-1"],
+    emptyState: ["text-sm", "text-muted-foreground", "italic"],
+    nav: [],
+    list: ["space-y-1", "list-none", "m-0", "p-0"],
+    item: ["list-none", "flex", "items-baseline", "gap-2"],
+    itemNumber: [
+      "text-sm",
+      "text-muted-foreground",
+      "tabular-nums",
+      "shrink-0"
+    ],
+    itemButton: [
+      "text-sm",
+      "text-left",
+      "hover:text-primary",
+      "hover:underline",
+      "transition-colors",
+      "truncate"
+    ]
+  },
+  variants: {
+    style: {
+      default: {
+        root: ["bg-muted/30", "border", "p-4"]
+      },
+      flat: {
+        root: ["bg-transparent", "border-0", "p-0"],
+        header: ["mb-2"]
+      },
+      compact: {
+        root: ["bg-muted/20", "border", "p-3"],
+        list: ["space-y-0.5"],
+        itemButton: ["text-xs"],
+        itemNumber: ["text-xs"]
+      }
+    }
+  },
+  defaultVariants: {
+    style: "default"
+  }
+});
+
 // src/components/toolbar.ts
-var import_tailwind_variants67 = require("tailwind-variants");
-var toolbar = (0, import_tailwind_variants67.tv)({
+var import_tailwind_variants69 = require("tailwind-variants");
+var toolbar = (0, import_tailwind_variants69.tv)({
   slots: {
     root: "flex items-center gap-2.5 p-1",
     button: "shrink-0",
@@ -4454,8 +4648,8 @@ var toolbar = (0, import_tailwind_variants67.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants68 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants68.tv)({
+var import_tailwind_variants70 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants70.tv)({
   slots: {
     content: [
       "bg-primary-900 text-primary-foreground",
@@ -4500,6 +4694,7 @@ var tooltip = (0, import_tailwind_variants68.tv)({
   heading,
   hoverCard,
   imageCrop,
+  imagePlaceholder,
   impactCard,
   input,
   inputGroup,
@@ -4537,6 +4732,7 @@ var tooltip = (0, import_tailwind_variants68.tv)({
   table,
   tabs,
   textarea,
+  toc,
   toolbar,
   tooltip
 });