@svadmin/ui 0.75.0 → 0.77.0

package/dist/index.d.ts

@@ -196,7 +196,7 @@ export { default as RetryTaskButton } from "./components/RetryTaskButton.svelte"
 export { default as CancelTaskButton } from "./components/CancelTaskButton.svelte";
 export { default as DraggableGrid } from "./components/DraggableGrid.svelte";
 export type { GridModule } from "./types.js";
-export { BarChart, LineChart, PieChart } from './components/charts/index.js';
+export { BarChart, LineChart, PieChart, AreaChart, ScatterChart } from './components/charts/index.js';
 export { default as NumberField } from './components/fields/NumberField.svelte';
 export { default as DateField } from './components/fields/DateField.svelte';
 export { default as EmailField } from './components/fields/EmailField.svelte';
@@ -341,3 +341,21 @@ export { default as MediaThumbnail } from './components/content/MediaThumbnail.s
 export type { MediaThumbnailSize, MediaThumbnailFit } from './components/content/MediaThumbnail.svelte';
 export { default as FileBrowser } from './components/content/FileBrowser.svelte';
 export type { FileBrowserData, FileBrowserInit, FileBrowserMenuOptions, FileBrowserProps } from './components/content/FileBrowser.svelte';
+export { default as HighlightText } from './components/HighlightText.svelte';
+export { splitHighlights, escapeRegExp } from './components/highlight.js';
+export type { HighlightSegment, SplitHighlightsOptions } from './components/highlight.js';
+export { default as Marquee } from './components/Marquee.svelte';
+export { default as MediaPlayer } from './components/MediaPlayer.svelte';
+export { default as TopProgressBar } from './components/TopProgressBar.svelte';
+export { default as PhoneInput } from './components/PhoneInput.svelte';
+export { PHONE_DIAL_CODES, findDialCodeByCountry, toE164, splitE164, formatNationalNumber, } from './components/phone-dial-codes.js';
+export type { PhoneDialCode } from './components/phone-dial-codes.js';
+export { useMediaQuery, useDeviceDetect, MOBILE_QUERY, TABLET_QUERY, TOUCH_QUERY, REDUCED_MOTION_QUERY, DARK_QUERY, } from './components/media.svelte.js';
+export type { MediaQueryState, DeviceDetectState } from './components/media.svelte.js';
+export { useClipboard, useLocalStorage, useDebouncedValue, useInterval, useEventListener, useOnClickOutside, useWindowSize, } from './components/browser.svelte.js';
+export type { ClipboardState, ClipboardOptions, LocalStorageState, DebouncedValue, WindowSize, SwipeHandlers, } from './components/browser.svelte.js';
+export { useSwipe } from './components/browser.svelte.js';
+export { default as AppFooter } from './components/AppFooter.svelte';
+export type { FooterLink, FooterColumn } from './components/AppFooter.svelte';
+export { default as ResizableGrid } from './components/ResizableGrid.svelte';
+export type { GridItem } from './components/ResizableGrid.svelte';

package/dist/index.js

@@ -153,7 +153,7 @@ export { default as RetryTaskButton } from "./components/RetryTaskButton.svelte"
 export { default as CancelTaskButton } from "./components/CancelTaskButton.svelte";
 export { default as DraggableGrid } from "./components/DraggableGrid.svelte";
 // Dashboard Charts (zero-dependency SVG)
-export { BarChart, LineChart, PieChart } from './components/charts/index.js';
+export { BarChart, LineChart, PieChart, AreaChart, ScatterChart } from './components/charts/index.js';
 // Field display components
 export { default as NumberField } from './components/fields/NumberField.svelte';
 export { default as DateField } from './components/fields/DateField.svelte';
@@ -280,3 +280,16 @@ export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as BatchActionBar } from './components/BatchActionBar.svelte';
 export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';
 export { default as FileBrowser } from './components/content/FileBrowser.svelte';
+// Ecosystem utilities: highlighting, marquee, media, progress, phone, responsive
+export { default as HighlightText } from './components/HighlightText.svelte';
+export { splitHighlights, escapeRegExp } from './components/highlight.js';
+export { default as Marquee } from './components/Marquee.svelte';
+export { default as MediaPlayer } from './components/MediaPlayer.svelte';
+export { default as TopProgressBar } from './components/TopProgressBar.svelte';
+export { default as PhoneInput } from './components/PhoneInput.svelte';
+export { PHONE_DIAL_CODES, findDialCodeByCountry, toE164, splitE164, formatNationalNumber, } from './components/phone-dial-codes.js';
+export { useMediaQuery, useDeviceDetect, MOBILE_QUERY, TABLET_QUERY, TOUCH_QUERY, REDUCED_MOTION_QUERY, DARK_QUERY, } from './components/media.svelte.js';
+export { useClipboard, useLocalStorage, useDebouncedValue, useInterval, useEventListener, useOnClickOutside, useWindowSize, } from './components/browser.svelte.js';
+export { useSwipe } from './components/browser.svelte.js';
+export { default as AppFooter } from './components/AppFooter.svelte';
+export { default as ResizableGrid } from './components/ResizableGrid.svelte';

package/dist/recipes.d.ts

@@ -120,6 +120,14 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {
+            root: string;
+        };
+    };
 }, {
     root: string;
 }, undefined, {
@@ -134,6 +142,14 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {
+            root: string;
+        };
+    };
 }, {
     root: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -148,38 +164,37 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {
+            root: string;
+        };
+    };
 }, {
     root: string;
 }>>;
 declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+        comfortable: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -190,20 +205,25 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     description: string;
     actions: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+        comfortable: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -213,7 +233,26 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     title: string;
     description: string;
     actions: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+        comfortable: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+    };
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;

package/dist/recipes.js

@@ -55,28 +55,53 @@ const buttonRecipeDefaults = { variant: "default", size: "default" };
 const badgeRecipeDefaults = { variant: "default" };
 const textareaRecipeStyles = tv({ base: "svadmin-textarea" });
 const contentPageRecipeStyles = tv({
-    slots: { root: `${semantic.page} svadmin-content-page space-y-6` },
+    slots: { root: `${semantic.page} svadmin-content-page` },
     variants: {
         width: {
             narrow: { root: "max-w-3xl" },
             default: { root: "max-w-[74rem]" },
             wide: { root: "max-w-[92rem]" },
         },
+        density: {
+            compact: { root: "space-y-4" },
+            comfortable: { root: "space-y-6" },
+        },
     },
-    defaultVariants: { width: "default" },
+    defaultVariants: { width: "default", density: "comfortable" },
 });
 const contentHeaderRecipeStyles = tv({
     slots: {
-        root: "svadmin-content-header space-y-3",
+        root: "svadmin-content-header",
         breadcrumbs: `${semantic.group} text-xs text-muted-foreground`,
         currentCrumb: "text-foreground",
-        row: "flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between",
-        heading: "min-w-0 space-y-1",
+        row: "flex flex-col sm:flex-row sm:items-start sm:justify-between",
+        heading: "min-w-0",
         eyebrow: "text-xs font-medium text-muted-foreground",
-        title: "text-xl font-semibold leading-tight text-foreground",
-        description: "max-w-2xl text-sm leading-6 text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center gap-2",
+        title: "font-semibold leading-tight text-foreground",
+        description: "max-w-2xl text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center",
     },
+    variants: {
+        density: {
+            compact: {
+                root: "space-y-2",
+                row: "gap-3",
+                heading: "space-y-0.5",
+                title: "text-lg leading-tight",
+                description: "text-[0.8125rem] leading-5",
+                actions: "gap-1.5",
+            },
+            comfortable: {
+                root: "space-y-3",
+                row: "gap-6",
+                heading: "space-y-1",
+                title: "text-xl leading-tight",
+                description: "text-sm leading-6",
+                actions: "gap-2",
+            },
+        },
+    },
+    defaultVariants: { density: "comfortable" },
 });
 const metricBlockRecipeStyles = tv({
     slots: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.75.0",
+  "version": "0.77.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -51,6 +51,25 @@
       "default": "./dist/components/*.svelte"
     },
     "./components/*": "./dist/components/*",
+    "./code-editor": {
+      "types": "./dist/components/CodeEditor.svelte.d.ts",
+      "svelte": "./dist/components/CodeEditor.svelte",
+      "default": "./dist/components/CodeEditor.svelte"
+    },
+    "./code-editor/presets": {
+      "types": "./dist/components/code-editor-presets.d.ts",
+      "default": "./dist/components/code-editor-presets.js"
+    },
+    "./json-editor": {
+      "types": "./dist/components/JsonEditor.svelte.d.ts",
+      "svelte": "./dist/components/JsonEditor.svelte",
+      "default": "./dist/components/JsonEditor.svelte"
+    },
+    "./qr-code": {
+      "types": "./dist/components/QRCode.svelte.d.ts",
+      "svelte": "./dist/components/QRCode.svelte",
+      "default": "./dist/components/QRCode.svelte"
+    },
     "./design-contract": {
       "types": "./dist/design-contract.d.ts",
       "default": "./dist/design-contract.js"
@@ -65,10 +84,18 @@
     }
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.55.0",
+    "@codemirror/lang-javascript": "^6.0.0",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/lang-sql": "^6.0.0",
+    "@svadmin/core": "^0.57.0",
     "@tanstack/svelte-query": "^6.1.48",
+    "codemirror": "^6.0.0",
     "isomorphic-dompurify": "^3.23.0",
-    "svelte": "^5.56.10"
+    "qrcode": "^1.5.4",
+    "svelte": "^5.56.10",
+    "svelte-codemirror-editor": "^2.1.0",
+    "svelte-jsoneditor": "^3.13.0"
   },
   "peerDependenciesMeta": {
     "isomorphic-dompurify": {
@@ -85,6 +112,30 @@
     },
     "svelte": {
       "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    },
+    "qrcode": {
+      "optional": true
+    },
+    "svelte-codemirror-editor": {
+      "optional": true
+    },
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/lang-sql": {
+      "optional": true
+    },
+    "svelte-jsoneditor": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -119,17 +170,26 @@
     "access": "public"
   },
   "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/lang-sql": "^6.10.0",
     "@happy-dom/global-registrator": "^20.11.12",
-    "@svadmin/ai-elements": "^0.10.0",
+    "@svadmin/ai-elements": "^0.10.2",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@tailwindcss/cli": "4.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/svelte": "^5.4.2",
     "@testing-library/user-event": "^14.6.6",
+    "@types/qrcode": "^1.5.6",
+    "codemirror": "^6.0.2",
     "happy-dom": "^20.11.12",
     "postcss": "^8.5.26",
     "postcss-selector-parser": "^7.1.1",
+    "qrcode": "^1.5.4",
     "shadcn-svelte": "^1.7.0",
+    "svelte-codemirror-editor": "^2.1.0",
+    "svelte-jsoneditor": "^3.13.0",
     "tailwindcss": "4.3.3",
     "vitest": "^4.1.11"
   },