@kopexa/theme 17.9.0 → 17.11.0

package/dist/{chunk-W7RJG22S.mjs → chunk-B5JVXVSG.mjs}

@@ -5,21 +5,16 @@ var splitPageLayout = tv({
     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"]

package/dist/{chunk-3CZOBPDH.mjs → chunk-CVGMGJPW.mjs}

@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
 var sidebar = 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: [
@@ -30,7 +30,7 @@ var sidebar = 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"],

package/dist/{chunk-NNKYGAZC.mjs → chunk-LIKA7I7Y.mjs}

@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
 var slashDropdownMenu = 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"

package/dist/chunk-ODC3GJTR.mjs

@@ -0,0 +1,61 @@
+// src/components/toc.ts
+import { tv } from "tailwind-variants";
+var toc = 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"
+  }
+});
+
+export {
+  toc
+};

package/dist/chunk-Q72M565Q.mjs

@@ -0,0 +1,143 @@
+// src/components/editor-basic.ts
+import { tv } from "tailwind-variants";
+var editorBasic = tv({
+  slots: {
+    root: [
+      "grid grid-rows-[auto,minmax(0,1fr)]",
+      "h-full min-h-0 w-full min-w-0",
+      "content-start isolate"
+    ],
+    toolbarContainer: [
+      "row-start-1 row-end-2",
+      "flex items-center gap-0.5",
+      "sticky top-0 z-10"
+    ],
+    toolbar: "w-full",
+    wrapper: [
+      "row-start-2 row-end-3",
+      "min-h-0 min-w-0",
+      "overflow-y-auto"
+      //	"h-[calc(100%-var(--spacing-editor-toolbar))]",
+    ],
+    content: [
+      "w-full min-w-0",
+      "h-auto min-h-0",
+      "[&_.tiptap.ProseMirror]:py-4",
+      "[&_.tiptap.ProseMirror]:px-6",
+      "[&_.tiptap.ProseMirror]:min-h-0"
+    ],
+    toolbarGroup: "flex items-center gap-0.5"
+  },
+  variants: {
+    variant: {
+      // rounded toolbar, muted background
+      default: {
+        wrapper: ["border rounded-md"],
+        toolbarContainer: "rounded-md mb-2",
+        content: ""
+      },
+      // document style, eg. document editor, fullpage etc pp
+      document: {
+        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: "",
+        wrapper: [
+          "border rounded-md",
+          "max-h-[351lh]",
+          "max-h-[calc(35lh-var(--spacing-editor-toolbar,theme(space.10)))]"
+        ],
+        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",
+    bordered: true
+  }
+});
+
+export {
+  editorBasic
+};

package/dist/chunk-VO435JJ5.mjs

@@ -0,0 +1,62 @@
+// src/components/image-placeholder.ts
+import { tv } from "tailwind-variants";
+var imagePlaceholder = 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"
+  }
+});
+
+export {
+  imagePlaceholder
+};

package/dist/components/editor-basic.d.mts

@@ -9,8 +9,10 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             content: string;
         };
         document: {
-            wrapper: string;
-            content: string;
+            root: string;
+            toolbarContainer: string[];
+            wrapper: string[];
+            content: string[];
         };
         comment: {
             root: string;
@@ -18,6 +20,16 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             toolbarContainer: string;
             content: string;
         };
+        field: {
+            root: string[];
+            wrapper: string[];
+            toolbarContainer: string[];
+            content: string[];
+        };
+    };
+    bordered: {
+        true: {};
+        false: {};
     };
 }, {
     root: string[];
@@ -34,8 +46,10 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             content: string;
         };
         document: {
-            wrapper: string;
-            content: string;
+            root: string;
+            toolbarContainer: string[];
+            wrapper: string[];
+            content: string[];
         };
         comment: {
             root: string;
@@ -43,6 +57,16 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             toolbarContainer: string;
             content: string;
         };
+        field: {
+            root: string[];
+            wrapper: string[];
+            toolbarContainer: string[];
+            content: string[];
+        };
+    };
+    bordered: {
+        true: {};
+        false: {};
     };
 }, {
     root: string[];
@@ -59,8 +83,10 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             content: string;
         };
         document: {
-            wrapper: string;
-            content: string;
+            root: string;
+            toolbarContainer: string[];
+            wrapper: string[];
+            content: string[];
         };
         comment: {
             root: string;
@@ -68,6 +94,16 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             toolbarContainer: string;
             content: string;
         };
+        field: {
+            root: string[];
+            wrapper: string[];
+            toolbarContainer: string[];
+            content: string[];
+        };
+    };
+    bordered: {
+        true: {};
+        false: {};
     };
 }, {
     root: string[];

package/dist/components/editor-basic.d.ts

@@ -9,8 +9,10 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             content: string;
         };
         document: {
-            wrapper: string;
-            content: string;
+            root: string;
+            toolbarContainer: string[];
+            wrapper: string[];
+            content: string[];
         };
         comment: {
             root: string;
@@ -18,6 +20,16 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             toolbarContainer: string;
             content: string;
         };
+        field: {
+            root: string[];
+            wrapper: string[];
+            toolbarContainer: string[];
+            content: string[];
+        };
+    };
+    bordered: {
+        true: {};
+        false: {};
     };
 }, {
     root: string[];
@@ -34,8 +46,10 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             content: string;
         };
         document: {
-            wrapper: string;
-            content: string;
+            root: string;
+            toolbarContainer: string[];
+            wrapper: string[];
+            content: string[];
         };
         comment: {
             root: string;
@@ -43,6 +57,16 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             toolbarContainer: string;
             content: string;
         };
+        field: {
+            root: string[];
+            wrapper: string[];
+            toolbarContainer: string[];
+            content: string[];
+        };
+    };
+    bordered: {
+        true: {};
+        false: {};
     };
 }, {
     root: string[];
@@ -59,8 +83,10 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             content: string;
         };
         document: {
-            wrapper: string;
-            content: string;
+            root: string;
+            toolbarContainer: string[];
+            wrapper: string[];
+            content: string[];
         };
         comment: {
             root: string;
@@ -68,6 +94,16 @@ declare const editorBasic: tailwind_variants.TVReturnType<{
             toolbarContainer: string;
             content: string;
         };
+        field: {
+            root: string[];
+            wrapper: string[];
+            toolbarContainer: string[];
+            content: string[];
+        };
+    };
+    bordered: {
+        true: {};
+        false: {};
     };
 }, {
     root: string[];

package/dist/components/editor-basic.js

@@ -62,8 +62,21 @@ var editorBasic = (0, import_tailwind_variants.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: "",
@@ -74,11 +87,78 @@ var editorBasic = (0, import_tailwind_variants.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
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/editor-basic.mjs

@@ -1,6 +1,6 @@
 import {
   editorBasic
-} from "../chunk-XOL7P7NP.mjs";
+} from "../chunk-Q72M565Q.mjs";
 export {
   editorBasic
 };