@warkypublic/svelix 0.1.46 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # Svelix
 
-Svelix is a Svelte 5 component library focused on workflow-heavy UI, data-rich views, and content tooling.
+`@warkypublic/svelix` — a Svelte 5 component library built on Skeleton UI and Tailwind CSS v4, focused on workflow-heavy UI, data-rich views, and content tooling.
 
 ## Install
 
@@ -8,45 +8,105 @@ Svelix is a Svelte 5 component library focused on workflow-heavy UI, data-rich v
 pnpm add @warkypublic/svelix
 ```
 
-## What ships
+## Usage
 
-- Svelte 5 components and helpers from the package root
-- published CSS assets under `@warkypublic/svelix/css/...`
-- LLM-oriented documentation under `@warkypublic/svelix/llm/...`
-
-## LLM Documentation
-
-The repository includes an `llm/` folder with project context and implementation docs.
-
-### In this repository
-
-- [llm/README.md](./llm/README.md)
-- [llm/ARCHITECTURE.md](./llm/ARCHITECTURE.md)
-- [llm/SETUP.md](./llm/SETUP.md)
-- [llm/COMPONENT_GUIDE.md](./llm/COMPONENT_GUIDE.md)
-- [llm/IMPLEMENTATION_PLAN.md](./llm/IMPLEMENTATION_PLAN.md)
-- [llm/ROADMAP.md](./llm/ROADMAP.md)
-- [llm/ESLINT_GUIDE.md](./llm/ESLINT_GUIDE.md)
-- [llm/tools/SVAR.md](./llm/tools/SVAR.md)
-- [llm/tools/resolvespec-js.md](./llm/tools/resolvespec-js.md)
-
-### After install
+```ts
+import { Button, Former, Gridler } from '@warkypublic/svelix';
+```
 
-The `llm/` docs are published with the package and can be accessed in either of these ways:
+## Components
+
+### Layout & Structure
+| Export | Description |
+|---|---|
+| `Boxer`, `BoxerTarget` | Adaptive layout container with data-adapter support |
+| `Portal` | Renders children outside the current DOM subtree |
+| `ErrorBoundary` | Catches and displays component errors |
+
+### Forms
+| Export | Description |
+|---|---|
+| `Former`, `FormerButtonArea`, `FormerDrawer`, `FormerModal` | Form builder with modal/drawer variants |
+| `createFormerState` | Reactive form state factory |
+| `FormerResolveSpecAPI`, `FormerRestHeadSpecAPI` | API adapters for form data sources |
+| `ButtonCtrl`, `IconButtonCtrl` | Button and icon-button form controls |
+| `TextInputCtrl`, `TextAreaCtrl`, `PasswordInputCtrl` | Text input controls |
+| `NumberInputCtrl`, `NativeSelectCtrl` | Number and select controls |
+| `SwitchCtrl`, `DateTimeCtrl` | Toggle and date/time picker controls |
+| `InlineWrapper` | Inline layout wrapper for form controls |
+
+### Data Grids
+| Export | Description |
+|---|---|
+| `Gridler`, `GridlerFull` | Feature-rich data grid / table |
+| `GridlerResolveSpecAdapter`, `GridlerRestHeaderSpecAdapter` | Data adapters for Gridler |
+| `SvarkGrid` | SVAR-based grid with context menus and column mapping |
+| `SvarkResolveSpecAdapter`, `SvarkRestHeaderSpecAdapter` | Data adapters for SvarkGrid |
+
+### Card Grid
+| Export | Description |
+|---|---|
+| `CardGrid`, `DefaultCard`, `CardGridFilterPanel` | Filterable, sortable card grid |
+
+### Menus & Overlays
+| Export | Description |
+|---|---|
+| `BetterMenu`, `MenuRenderer` | Enhanced dropdown menu |
+| `createBetterMenuStore` | Store factory for menu state |
+| `OverlayStack` | Stacked modal/overlay manager |
+
+### Content & Markup
+| Export | Description |
+|---|---|
+| `ContentEditor` | Rich content editor (Carta Markdown + Monaco) |
+
+### Trees
+| Export | Description |
+|---|---|
+| `VTree` | Virtualised tree view |
+| `VTreeResolveSpecAdapter` | Data adapter for VTree |
+
+### Global State
+| Export | Description |
+|---|---|
+| `GlobalStateStoreProvider` | App-level state provider |
+| `useGlobalStateStoreContext` | Context accessor |
+| `t`, `_T`, `loadTranslations`, `appendTranslations`, etc. | i18n helpers |
+
+### Utilities & Misc
+| Export | Description |
+|---|---|
+| `Button` | Base button component |
+| `CaptureScreenshotComponent`, `CaptureScreen` | Screenshot capture |
+| `errorManager` | Global error manager |
+| `IconAdd`, `IconClose`, `IconEdit`, `IconSearch`, etc. | SVG icon components |
+
+## CSS Assets
+
+Tailwind CSS source and theme files are published under `@warkypublic/svelix/css/`:
+
+```ts
+import '@warkypublic/svelix/css/tailwind-source.css';
+import '@warkypublic/svelix/css/svelix_orange.css';
+```
 
-- filesystem path: `node_modules/@warkypublic/svelix/llm/`
-- package subpath: `@warkypublic/svelix/llm/...`
+## LLM Documentation
 
-Examples:
+Extended architecture and implementation docs are published with the package under `@warkypublic/svelix/llm/`:
 
-```text
+```
 node_modules/@warkypublic/svelix/llm/README.md
 node_modules/@warkypublic/svelix/llm/ARCHITECTURE.md
+node_modules/@warkypublic/svelix/llm/COMPONENT_GUIDE.md
 ```
 
-```text
-@warkypublic/svelix/llm/README.md
-@warkypublic/svelix/llm/ARCHITECTURE.md
-```
+## Development
 
-This makes the docs available to external tools and local LLM workflows that inspect installed package contents.
+```bash
+pnpm dev          # SvelteKit dev server
+pnpm storybook    # Storybook on port 6006
+pnpm build        # Build package
+pnpm test         # Run unit tests
+pnpm check        # Type-check .svelte files
+pnpm lint         # ESLint
+```

package/dist/components/BetterMenu/BetterMenu.svelte

@@ -1,41 +1,25 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import { createBetterMenuStore } from './store';
-	import MenuRenderer from './MenuRenderer.svelte';
-	import type { BetterMenuInstance } from './types';
-
-	export interface Props {
-		children: Snippet;
-		disablePortal?: boolean;
-		providerID?: string;
-		width?: number;
-	}
-
-	const { children, disablePortal = false, providerID, width }: Props = $props();
-
-	// providerID intentionally uses initial value - stores are created once per provider instance
-	const store = createBetterMenuStore(providerID);
-
-	$effect(() => {
-		if (width !== undefined) {
-			store.setWidth(width);
-		}
-	});
-
-	setContext('betterMenuStore', store);
-
-	export function show(id: string, options?: Partial<Omit<BetterMenuInstance, 'id'>>) {
-		store.show(id, options);
-	}
-
-	export function set(id: string, options?: Partial<Omit<BetterMenuInstance, 'id'>>) {
-		store.set(id, options);
-	}
-
-	export function hide(id: string) {
-		store.hide(id);
+<script lang="ts">import { setContext } from "svelte";
+import { createBetterMenuStore } from "./store";
+import MenuRenderer from "./MenuRenderer.svelte";
+const { children, disablePortal = false, providerID, width } = $props();
+// providerID intentionally uses initial value - stores are created once per provider instance
+// svelte-ignore state_referenced_locally
+const store = createBetterMenuStore(providerID);
+$effect(() => {
+	if (width !== undefined) {
+		store.setWidth(width);
 	}
+});
+setContext("betterMenuStore", store);
+export function show(id, options) {
+	store.show(id, options);
+}
+export function set(id, options) {
+	store.set(id, options);
+}
+export function hide(id) {
+	store.hide(id);
+}
 </script>
 
 <MenuRenderer {disablePortal} />

package/dist/components/BetterMenu/BetterMenuAsyncButton.svelte

@@ -1,34 +1,24 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { BetterMenuInstanceItem } from "./types";
-
-  export interface Props {
-    item: BetterMenuInstanceItem;
-    onClose: () => void;
-  }
-
-  const { item, onClose }: Props = $props();
-
-  let loading = $state(false);
-  function isSnippet(value: unknown): value is Snippet {
-    return typeof value === "function";
-  }
-  function isSvg(value: string): boolean {
-    return value?.trimStart?.().startsWith?.("<svg");
-  }
-
-  async function handleClick(e: MouseEvent) {
-    item.onClick?.(e);
-    if (item.onClickAsync) {
-      loading = true;
-      try {
-        await item.onClickAsync(e);
-      } finally {
-        loading = false;
-      }
-    }
-    onClose();
-  }
+<script lang="ts">const { item, onClose } = $props();
+let loading = $state(false);
+function isSnippet(value) {
+	return typeof value === "function";
+}
+function isSvg(value) {
+	return value?.trimStart?.().startsWith?.("<svg");
+}
+async function handleClick(e) {
+	item.onClick?.(e);
+	if (item.onClickAsync) {
+		loading = true;
+		try {
+			await item.onClickAsync(e);
+		} finally {
+			loading = false;
+		}
+	}
+	onClose();
+}
+export {};
 </script>
 
 <button

package/dist/components/BetterMenu/BetterMenuPreview.svelte

@@ -1,33 +1,31 @@
-<script lang="ts">
-	import BetterMenu from './BetterMenu.svelte';
-	import type { BetterMenuInstance } from './types';
-
-	export interface Props {
-		providerID?: string;
-		width?: number;
-	}
-
-	const { providerID = 'storybook-menu', width }: Props = $props();
-
-	type BetterMenuRef = { show: (id: string, options?: Partial<Omit<BetterMenuInstance, 'id'>>) => void; hide: (id: string) => void };
-	let betterMenuRef: BetterMenuRef | undefined = $state();
-	let buttonRef: HTMLButtonElement | null = $state(null);
-
-	function showMenu() {
-		if (betterMenuRef && buttonRef) {
-			const rect = buttonRef.getBoundingClientRect();
-			betterMenuRef.show('example-menu', {
-				x: rect.left,
-				y: rect.bottom + 8,
-				items: [
-					{ label: 'Option 1', onClick: () => { /* Option 1 selected */ } },
-					{ label: 'Option 2', onClick: () => { /* Option 2 selected */ } },
-					{ isDivider: true },
-					{ label: 'Option 3', onClick: () => { /* Option 3 selected */ } },
-				]
-			});
-		}
+<script lang="ts">import BetterMenu from "./BetterMenu.svelte";
+const { providerID = "storybook-menu", width } = $props();
+let betterMenuRef = $state();
+let buttonRef = $state(null);
+function showMenu() {
+	if (betterMenuRef && buttonRef) {
+		const rect = buttonRef.getBoundingClientRect();
+		betterMenuRef.show("example-menu", {
+			x: rect.left,
+			y: rect.bottom + 8,
+			items: [
+				{
+					label: "Option 1",
+					onClick: () => {					/* Option 1 selected */}
+				},
+				{
+					label: "Option 2",
+					onClick: () => {					/* Option 2 selected */}
+				},
+				{ isDivider: true },
+				{
+					label: "Option 3",
+					onClick: () => {					/* Option 3 selected */}
+				}
+			]
+		});
 	}
+}
 </script>
 
 <BetterMenu bind:this={betterMenuRef} {providerID} {width}>

package/dist/components/BetterMenu/MenuRenderer.svelte

@@ -1,56 +1,45 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getContext } from 'svelte';
-	import type { BetterMenuInstanceItem, BetterMenuStoreState } from './types';
-	import type { BetterMenuStore } from './store';
-	import BetterMenuAsyncButton from './BetterMenuAsyncButton.svelte';
-	import { registerOverlay } from '../OverlayStack';
-	import Portal from '../Portal/Portal.svelte';
-
-	export interface Props {
-		disablePortal?: boolean;
-	}
-	const { disablePortal = false }: Props = $props();
-
-	const store = getContext<BetterMenuStore>('betterMenuStore');
-	let menuState = $state<BetterMenuStoreState>({ menus: [], providerID: '' });
-	const hasVisibleMenus = $derived(menuState.menus.some((menu) => menu.visible));
-	let backdropZ = $state(1090);
-	let menuZ = $state(1100);
-	let submenuZ = $state(1110);
-
-	$effect(() => {
-		return store.subscribe((s) => {
-			menuState = s;
-		});
-	});
-
-	$effect(() => {
-		if (!hasVisibleMenus) {
-			return;
-		}
-
-		const overlay = registerOverlay({
-			kind: 'menu',
-			mount: disablePortal ? 'inline' : 'portal',
-		});
-		backdropZ = overlay.layer.backdrop;
-		menuZ = overlay.layer.content;
-		submenuZ = overlay.layer.floating;
-
-		return () => {
-			overlay.unregister();
-			backdropZ = 1090;
-			menuZ = 1100;
-			submenuZ = 1110;
-		};
+<script lang="ts">import { getContext } from "svelte";
+import BetterMenuAsyncButton from "./BetterMenuAsyncButton.svelte";
+import { registerOverlay } from "../OverlayStack";
+import Portal from "../Portal/Portal.svelte";
+const { disablePortal = false } = $props();
+const store = getContext("betterMenuStore");
+let menuState = $state({
+	menus: [],
+	providerID: ""
+});
+const hasVisibleMenus = $derived(menuState.menus.some((menu) => menu.visible));
+let backdropZ = $state(1090);
+let menuZ = $state(1100);
+let submenuZ = $state(1110);
+$effect(() => {
+	return store.subscribe((s) => {
+		menuState = s;
 	});
-
-	function hideMenu(id: string) {
-		const menu = menuState.menus.find((m) => m.id === id);
-		menu?.onHide?.();
-		store.setInstanceState(id, 'visible', false);
+});
+$effect(() => {
+	if (!hasVisibleMenus) {
+		return;
 	}
+	const overlay = registerOverlay({
+		kind: "menu",
+		mount: disablePortal ? "inline" : "portal"
+	});
+	backdropZ = overlay.layer.backdrop;
+	menuZ = overlay.layer.content;
+	submenuZ = overlay.layer.floating;
+	return () => {
+		overlay.unregister();
+		backdropZ = 1090;
+		menuZ = 1100;
+		submenuZ = 1110;
+	};
+});
+function hideMenu(id) {
+	const menu = menuState.menus.find((m) => m.id === id);
+	menu?.onHide?.();
+	store.setInstanceState(id, "visible", false);
+}
 </script>
 
 {#snippet menuItem(item: BetterMenuInstanceItem, onClose: () => void)}