@swis/genui-widgets 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+export { default as DynamicWidget } from './components/DynamicWidget.vue';
+export { default as WidgetBox } from './components/Box.vue';
+export { default as WidgetCard } from './components/Card.vue';
+export { default as WidgetButton } from './components/Button.vue';
+export { default as WidgetText } from './components/Text.vue';
+export { default as WidgetTitle } from './components/Title.vue';
+export { default as WidgetMarkdown } from './components/Markdown.vue';
+export { default as WidgetImage } from './components/Image.vue';
+export { default as WidgetForm } from './components/Form.vue';
+export { default as WidgetInput } from './components/Input.vue';
+export { default as WidgetTextarea } from './components/Textarea.vue';
+export { default as WidgetSelect } from './components/Select.vue';
+export { default as WidgetCheckbox } from './components/Checkbox.vue';
+export { default as WidgetRadioGroup } from './components/RadioGroup.vue';
+export { default as WidgetDatePicker } from './components/DatePicker.vue';
+export { default as WidgetBadge } from './components/Badge.vue';
+export { default as WidgetListView } from './components/ListView.vue';
+export { default as WidgetListViewItem } from './components/ListViewItem.vue';
+export { default as WidgetDivider } from './components/Divider.vue';
+export { default as WidgetSpacer } from './components/Spacer.vue';
+export { default as WidgetRow } from './components/Row.vue';
+export { default as WidgetCol } from './components/Col.vue';
+export { default as WidgetLabel } from './components/Label.vue';
+export { default as WidgetCaption } from './components/Caption.vue';
+export { default as WidgetIcon } from './components/Icon.vue';
+export { default as BaseLoader } from './components/BaseLoader.vue';
+export { ACTION_HOOKS_KEY } from './injectionKeys';
+export { applyTheme, createTheme, darkTheme, defaultTheme } from './theme';
+export { useTheme } from './composables/useTheme';
+export { fromChatKit } from './compat/chatkit';
+export { render } from './render';
+export { resolveTemplate } from './template';
+export { extractTemplateFromWidgetFile } from './widgetFile';
+export type { ActionHook, ChatKitAction } from './types/action';
+export type { WidgetInstance, RenderOptions } from './types/instance';
+export type { PaletteScale, PaletteStep, SemanticColor, ThemeConfig, ThemeTokens } from './types/theme';
+export type { WidgetFile, WidgetFileSource } from './widgetFile';
+export type { TemplateContext, SpacingSize, TextSize, WidgetAction, WidgetActionButton, WidgetNode, WidgetOption, WidgetTemplate, WidgetTemplateSource, WidgetType, } from './types/widget';
+import './styles/global.scss';

package/dist/injectionKeys.d.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+import type { ActionHook } from './types/action';
+export declare const ACTION_HOOKS_KEY: InjectionKey<ActionHook[]>;

package/dist/palette.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteScale, SemanticColor, ThemeConfig } from './types/theme';
+export { PALETTE_STEPS, SEMANTIC_COLORS } from './types/theme';
+export declare const defaultLightPalettes: Record<SemanticColor, PaletteScale>;
+export declare const defaultDarkPalettes: Record<SemanticColor, PaletteScale>;
+/**
+ * Resolve a ThemeConfig into a flat map of CSS var name → value.
+ * Falls back to defaultLightPalettes when no palettes are provided in config.
+ */
+export declare function resolveTheme(config: ThemeConfig): Record<string, string>;

package/dist/render.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetInstance, RenderOptions } from './types/instance';
+import type { WidgetTemplateSource } from './types/widget';
+export declare function render(container: HTMLElement, template: WidgetTemplateSource, options?: RenderOptions): WidgetInstance;

package/dist/styling/classes.d.ts

@@ -0,0 +1,4 @@
+export type ClassInput = string | null | undefined | false | Record<string, unknown> | ClassInput[];
+export declare function cx(...inputs: ClassInput[]): string[];
+export declare function blockVariant(block: string, variant: string, value: string | number | null | undefined): string | undefined;
+export declare function blockModifier(block: string, modifier: string | number | null | undefined): string | undefined;

package/dist/styling/styles.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from 'vue';
+export type LengthValue = string | number | null | undefined;
+export type InsetsValue = LengthValue | {
+    x?: LengthValue;
+    y?: LengthValue;
+    top?: LengthValue;
+    right?: LengthValue;
+    bottom?: LengthValue;
+    left?: LengthValue;
+};
+export declare function resolveToken(value: string | null | undefined, tokenMap: Record<string, string>): string | undefined;
+export declare function toCssLength(value: LengthValue, unit?: string): string | undefined;
+export declare function toBaseSpace(value: LengthValue): string | undefined;
+export declare function resolveRadius(value: string | null | undefined): string | undefined;
+export declare function lineClampStyles(maxLines: number | null | undefined): CSSProperties;
+export declare function dimensionStyles(options: {
+    width?: LengthValue;
+    height?: LengthValue;
+    size?: LengthValue;
+    aspectRatio?: string | number | null | undefined;
+}): CSSProperties;
+export declare function insetStyles(prefix: 'padding' | 'margin', value: InsetsValue, resolveValue?: (value: LengthValue) => string | undefined): CSSProperties;

package/dist/styling/tailwind.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Checks if a value is a valid Tailwind color token (e.g., 'red-400', 'blue-50')
+ */
+export declare function isTailwindToken(value: string): boolean;
+/**
+ * Resolves a Tailwind token to its hex color value
+ * Returns undefined if the token is invalid
+ */
+export declare function resolveTailwindToken(token: string): string | undefined;
+/**
+ * Converts a hex color to RGB and applies an alpha value
+ * Example: adjustAlpha('#f87171', 0.1) => 'rgba(248, 113, 113, 0.1)'
+ */
+export declare function adjustAlpha(hexColor: string, alpha: number): string;

package/dist/styling/text.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'vue';
+export declare function textStyles(options: {
+    color?: string | null;
+    defaultColor?: string;
+    maxLines?: number | null;
+    width?: string | number | null;
+}): CSSProperties;

package/dist/styling/tokens.d.ts

@@ -0,0 +1,47 @@
+export declare const semanticColorTokens: {
+    readonly primary: "var(--genui-primary-60)";
+    readonly secondary: "var(--genui-secondary-60)";
+    readonly success: "var(--genui-success-60)";
+    readonly danger: "var(--genui-danger-60)";
+    readonly warning: "var(--genui-warning-60)";
+    readonly info: "var(--genui-info-60)";
+    readonly discovery: "var(--genui-discovery-60)";
+    readonly caution: "var(--genui-caution-60)";
+};
+export declare const surfaceColorTokens: {
+    readonly surface: "var(--genui-surface)";
+    readonly background: "var(--genui-surface)";
+    readonly 'surface-secondary': "var(--genui-surface-secondary)";
+    readonly 'surface-tertiary': "var(--genui-surface-tertiary)";
+    readonly 'surface-elevated': "var(--genui-surface)";
+    readonly 'surface-elevated-secondary': "var(--genui-surface-secondary)";
+    readonly 'alpha-10': "var(--genui-secondary-5)";
+    readonly 'alpha-20': "var(--genui-secondary-10)";
+    readonly 'alpha-30': "var(--genui-secondary-20)";
+    readonly 'alpha-40': "var(--genui-secondary-30)";
+    readonly 'alpha-50': "var(--genui-secondary-40)";
+    readonly 'alpha-60': "var(--genui-secondary-50)";
+    readonly 'alpha-70': "var(--genui-secondary-60)";
+    readonly 'alpha-80': "var(--genui-secondary-70)";
+    readonly 'alpha-90': "var(--genui-secondary-80)";
+    readonly primary: "var(--genui-primary-60)";
+    readonly secondary: "var(--genui-secondary-60)";
+    readonly success: "var(--genui-success-60)";
+    readonly danger: "var(--genui-danger-60)";
+    readonly warning: "var(--genui-warning-60)";
+    readonly info: "var(--genui-info-60)";
+    readonly discovery: "var(--genui-discovery-60)";
+    readonly caution: "var(--genui-caution-60)";
+};
+export declare const textColorTokens: {
+    readonly prose: "var(--genui-text-primary)";
+    readonly primary: "var(--genui-text-primary)";
+    readonly secondary: "var(--genui-text-secondary)";
+    readonly tertiary: "var(--genui-text-tertiary)";
+    readonly success: "var(--genui-success-70)";
+    readonly danger: "var(--genui-danger-70)";
+    readonly warning: "var(--genui-warning-70)";
+    readonly info: "var(--genui-info-70)";
+    readonly discovery: "var(--genui-discovery-70)";
+    readonly caution: "var(--genui-caution-70)";
+};

package/dist/template.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateContext, WidgetTemplate, WidgetTemplateSource } from './types/widget';
+export declare function resolveTemplate(template: WidgetTemplateSource, context?: TemplateContext): WidgetTemplate;

package/dist/theme.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeConfig } from './types/theme';
+export declare const defaultTheme: ThemeConfig;
+export declare const darkTheme: ThemeConfig;
+export declare function applyTheme(element: HTMLElement, theme: ThemeConfig): void;
+/**
+ * Create a custom theme by merging overrides onto a base theme.
+ */
+export declare function createTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;

package/dist/types/action.d.ts

@@ -0,0 +1,7 @@
+import type { WidgetAction } from './widget';
+export type ActionHook = (action: WidgetAction) => void | Promise<void>;
+export interface ChatKitAction {
+    type: string;
+    payload?: Record<string, unknown>;
+    handling?: 'client' | 'server';
+}

package/dist/types/instance.d.ts

@@ -0,0 +1,14 @@
+import type { ActionHook } from './action';
+import type { ThemeConfig } from './theme';
+import type { TemplateContext, WidgetTemplateSource } from './widget';
+export interface WidgetInstance {
+    update(template: WidgetTemplateSource, templateContext?: TemplateContext): void;
+    setTheme(theme: ThemeConfig): void;
+    destroy(): void;
+}
+export interface RenderOptions {
+    actionHooks?: ActionHook[];
+    theme?: ThemeConfig;
+    format?: 'native' | 'chatkit';
+    templateContext?: TemplateContext;
+}

package/dist/types/tailwind.d.ts

@@ -0,0 +1,277 @@
+export declare const TAILWIND_COLORS: {
+    readonly slate: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly gray: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly zinc: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f4f4f5";
+        readonly 200: "#e4e4e7";
+        readonly 300: "#d4d4d8";
+        readonly 400: "#a1a1a6";
+        readonly 500: "#71717a";
+        readonly 600: "#52525b";
+        readonly 700: "#3f3f46";
+        readonly 800: "#27272a";
+        readonly 900: "#18181b";
+        readonly 950: "#09090b";
+    };
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+    readonly stone: {
+        readonly 50: "#fafaf9";
+        readonly 100: "#f5f5f4";
+        readonly 200: "#e7e5e4";
+        readonly 300: "#d6d3d1";
+        readonly 400: "#a8a29e";
+        readonly 500: "#78716b";
+        readonly 600: "#57534e";
+        readonly 700: "#44403c";
+        readonly 800: "#292524";
+        readonly 900: "#1c1917";
+        readonly 950: "#0c0a09";
+    };
+    readonly red: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+    readonly orange: {
+        readonly 50: "#fff7ed";
+        readonly 100: "#ffedd5";
+        readonly 200: "#fed7aa";
+        readonly 300: "#fdba74";
+        readonly 400: "#fb923c";
+        readonly 500: "#f97316";
+        readonly 600: "#ea580c";
+        readonly 700: "#c2410c";
+        readonly 800: "#9a3412";
+        readonly 900: "#7c2d12";
+        readonly 950: "#431407";
+    };
+    readonly amber: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly yellow: {
+        readonly 50: "#fefce8";
+        readonly 100: "#fef9c3";
+        readonly 200: "#fef08a";
+        readonly 300: "#fde047";
+        readonly 400: "#facc15";
+        readonly 500: "#eab308";
+        readonly 600: "#ca8a04";
+        readonly 700: "#a16207";
+        readonly 800: "#854d0e";
+        readonly 900: "#713f12";
+        readonly 950: "#422006";
+    };
+    readonly lime: {
+        readonly 50: "#f7fee7";
+        readonly 100: "#ecfccb";
+        readonly 200: "#d9f99d";
+        readonly 300: "#bfef45";
+        readonly 400: "#a3e635";
+        readonly 500: "#84cc16";
+        readonly 600: "#65a30d";
+        readonly 700: "#4d7c0f";
+        readonly 800: "#3f6212";
+        readonly 900: "#365314";
+        readonly 950: "#1a3a0a";
+    };
+    readonly green: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#145231";
+        readonly 950: "#052e16";
+    };
+    readonly emerald: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#6ee7b7";
+        readonly 500: "#10b981";
+        readonly 600: "#059669";
+        readonly 700: "#047857";
+        readonly 800: "#065f46";
+        readonly 900: "#064e3b";
+        readonly 950: "#022c22";
+    };
+    readonly teal: {
+        readonly 50: "#f0fdfa";
+        readonly 100: "#ccfbf1";
+        readonly 200: "#99f6e4";
+        readonly 300: "#5eead4";
+        readonly 400: "#2dd4bf";
+        readonly 500: "#14b8a6";
+        readonly 600: "#0d9488";
+        readonly 700: "#0f766e";
+        readonly 800: "#115e59";
+        readonly 900: "#134e4a";
+        readonly 950: "#0d3c38";
+    };
+    readonly cyan: {
+        readonly 50: "#ecf8ff";
+        readonly 100: "#cff9ff";
+        readonly 200: "#a5f3ff";
+        readonly 300: "#67e8f9";
+        readonly 400: "#22d3ee";
+        readonly 500: "#06b6d4";
+        readonly 600: "#0891b2";
+        readonly 700: "#0e7490";
+        readonly 800: "#155e75";
+        readonly 900: "#164e63";
+        readonly 950: "#082f49";
+    };
+    readonly blue: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#0c2340";
+    };
+    readonly indigo: {
+        readonly 50: "#eef2ff";
+        readonly 100: "#e0e7ff";
+        readonly 200: "#c7d2fe";
+        readonly 300: "#a5b4fc";
+        readonly 400: "#818cf8";
+        readonly 500: "#6366f1";
+        readonly 600: "#4f46e5";
+        readonly 700: "#4338ca";
+        readonly 800: "#3730a3";
+        readonly 900: "#312e81";
+        readonly 950: "#1e1b4b";
+    };
+    readonly violet: {
+        readonly 50: "#f5f3ff";
+        readonly 100: "#ede9fe";
+        readonly 200: "#ddd6fe";
+        readonly 300: "#c4b5fd";
+        readonly 400: "#a78bfa";
+        readonly 500: "#8b5cf6";
+        readonly 600: "#7c3aed";
+        readonly 700: "#6d28d9";
+        readonly 800: "#5b21b6";
+        readonly 900: "#4c1d95";
+        readonly 950: "#2e1065";
+    };
+    readonly purple: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7e22ce";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+        readonly 950: "#3b0764";
+    };
+    readonly fuchsia: {
+        readonly 50: "#fdf4ff";
+        readonly 100: "#fae8ff";
+        readonly 200: "#f5d0fe";
+        readonly 300: "#f0abfc";
+        readonly 400: "#e879f9";
+        readonly 500: "#d946ef";
+        readonly 600: "#c026d3";
+        readonly 700: "#a21caf";
+        readonly 800: "#86198f";
+        readonly 900: "#701a75";
+        readonly 950: "#500724";
+    };
+    readonly pink: {
+        readonly 50: "#fdf2f8";
+        readonly 100: "#fce7f3";
+        readonly 200: "#fbcfe8";
+        readonly 300: "#f8b4d8";
+        readonly 400: "#f472b6";
+        readonly 500: "#ec4899";
+        readonly 600: "#db2777";
+        readonly 700: "#be185d";
+        readonly 800: "#9d174d";
+        readonly 900: "#831843";
+        readonly 950: "#500724";
+    };
+    readonly rose: {
+        readonly 50: "#fff1f2";
+        readonly 100: "#ffe4e6";
+        readonly 200: "#fecdd3";
+        readonly 300: "#fed7aa";
+        readonly 400: "#fb7185";
+        readonly 500: "#f43f5e";
+        readonly 600: "#e11d48";
+        readonly 700: "#be123c";
+        readonly 800: "#9f1239";
+        readonly 900: "#881337";
+        readonly 950: "#4c0519";
+    };
+};
+export type TailwindColor = keyof typeof TAILWIND_COLORS;
+export type TailwindStep = keyof (typeof TAILWIND_COLORS)[TailwindColor];

package/dist/types/theme.d.ts

@@ -0,0 +1,24 @@
+export type PaletteStep = '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90';
+export type PaletteScale = Record<PaletteStep, string>;
+export type SemanticColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'discovery' | 'caution';
+export declare const PALETTE_STEPS: readonly PaletteStep[];
+export declare const SEMANTIC_COLORS: readonly SemanticColor[];
+export interface ThemeConfig {
+    baseSize?: string;
+    /** Override individual palette steps per semantic color */
+    palettes?: Partial<Record<SemanticColor, Partial<PaletteScale>>>;
+    /** Global surface/text/border tokens */
+    surface?: string;
+    surfaceSecondary?: string;
+    surfaceTertiary?: string;
+    background?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    textTertiary?: string;
+    borderDefault?: string;
+    disabledBg?: string;
+    disabledText?: string;
+    /** Escape hatch: override any CSS var directly (key = var name without --) */
+    overrides?: Record<string, string>;
+}
+export type ThemeTokens = ThemeConfig;

package/dist/types/widget.d.ts

@@ -0,0 +1,25 @@
+export type WidgetType = 'Box' | 'Card' | 'Button' | 'Text' | 'Title' | 'Markdown' | 'Image' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'RadioGroup' | 'DatePicker' | 'Form' | 'Badge' | 'ListView' | 'ListViewItem' | 'Divider' | 'Spacer' | 'Row' | 'Col' | 'Label' | 'Caption' | 'Icon';
+export type TextSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export type SpacingSize = 0 | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
+export interface WidgetAction {
+    type: string;
+    payload?: Record<string, unknown>;
+    handling?: 'client' | 'server';
+    [key: string]: unknown;
+}
+export interface WidgetNode {
+    type: WidgetType;
+    children?: WidgetNode[];
+    [prop: string]: unknown;
+}
+export type WidgetTemplate = WidgetNode;
+export type WidgetTemplateSource = WidgetTemplate | string;
+export type TemplateContext = Record<string, unknown>;
+export interface WidgetOption {
+    label: string;
+    value: string | number | boolean;
+}
+export interface WidgetActionButton {
+    label: string;
+    action: WidgetAction;
+}

package/dist/widgetFile.d.ts

@@ -0,0 +1,9 @@
+import type { WidgetTemplateSource } from './types/widget';
+export interface WidgetFile {
+    version?: string;
+    name?: string;
+    template: WidgetTemplateSource;
+    [key: string]: unknown;
+}
+export type WidgetFileSource = WidgetFile | string;
+export declare function extractTemplateFromWidgetFile(widgetFile: WidgetFileSource): WidgetTemplateSource;

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@swis/genui-widgets",
+  "version": "1.0.0",
+  "description": "Standalone Vue 3 widget renderer compatible with OpenAI ChatKit widget JSON.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/swisnl/genui-widgets.git"
+  },
+  "author": "Joris Meijer",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/genui-widgets.js",
+  "module": "./dist/genui-widgets.esm.js",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=20"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/genui-widgets.esm.js",
+      "require": "./dist/genui-widgets.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/genui-widgets.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5"
+  },
+  "dependencies": {
+    "dompurify": "^3.3",
+    "marked": "^17.0",
+    "nunjucks": "^3.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@vitejs/plugin-vue": "^6.0",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vue/test-utils": "^2.4",
+    "eslint": "^9.38.0",
+    "eslint-plugin-vue": "^10.5.1",
+    "globals": "^16.4.0",
+    "happy-dom": "^20.8",
+    "playwright": "^1.58.2",
+    "sass": "^1.98",
+    "typescript": "^5.9",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^8.0",
+    "vitest": "^4.1",
+    "vue": "^3.5",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.2"
+  },
+  "scripts": {
+    "prepack": "npm run build",
+    "build": "npm run build:esm && npm run build:iife",
+    "build:esm": "vite build --config vite.config.esm.ts && node -e \"const fs=require('fs'); const from='dist/style.css'; const to='dist/genui-widgets.css'; if (fs.existsSync(from)) fs.renameSync(from, to);\" && tsc --project tsconfig.build.json",
+    "build:iife": "vite build --config vite.config.iife.ts && node -e \"const fs=require('fs'); const css='dist/style.css'; const js='dist/genui-widgets.js'; if (fs.existsSync(css) && fs.existsSync(js)) { const cssText=fs.readFileSync(css,'utf8'); const jsText=fs.readFileSync(js,'utf8'); const injector='(function(){if(typeof document===\\'undefined\\')return;var s=document.createElement(\\'style\\');s.setAttribute(\\'data-genui-widgets\\',\\'\\');s.textContent='+JSON.stringify(cssText)+';document.head.appendChild(s);}());\\n'; fs.writeFileSync(js, injector + jsText); fs.unlinkSync(css); }\"",
+    "demo": "vite --config vite.config.ts demo",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --config vitest.config.ts",
+    "test:visual": "vitest run --config vitest.visual.config.ts",
+    "test:visual:update": "vitest run --config vitest.visual.config.ts --update",
+    "test:visual:playwright-image": "./scripts/run-visual-tests-in-playwright-image.sh",
+    "test:visual:update:playwright-image": "./scripts/run-visual-tests-in-playwright-image.sh --update",
+    "typecheck": "tsc --noEmit --project tsconfig.json"
+  },
+  "directories": {
+    "doc": "docs",
+    "test": "tests"
+  },
+  "bugs": {
+    "url": "https://github.com/swisnl/genui-widgets/issues"
+  },
+  "homepage": "https://github.com/swisnl/genui-widgets#readme"
+}