@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/datatable/url-filters.d.ts

@@ -0,0 +1,40 @@
+/**
+ * URL Filter Encoding/Decoding Utilities
+ *
+ * Uses JSON for encoding filter objects into URL parameters.
+ * The URLSearchParams layer handles escaping, and the decoder accepts both
+ * raw JSON and percent-encoded JSON payloads.
+ */
+import type { DatatableValue } from './types';
+export interface FilterState {
+    search?: string;
+    [key: string]: DatatableValue;
+}
+/**
+ * Encode filters to a compact JSON string for URL
+ */
+export declare function encodeFilters(filters: FilterState): string;
+/**
+ * Decode filters from a JSON string.
+ *
+ * The payload comes from the URL, so it is untrusted: text that is not JSON
+ * (raw or percent-encoded) or JSON that is not a filter object decodes to no
+ * filters instead of reaching callers as a value they must second-guess.
+ */
+export declare function decodeFilters(encoded: string | null): FilterState;
+/**
+ * Update URL with new filters using JSON encoding
+ */
+export declare function updateUrlWithFilters(url: URL, filters: FilterState, options?: {
+    preserveOtherParams?: boolean;
+    resetPage?: boolean;
+}): URL;
+/**
+ * Get filters from URL
+ */
+export declare function getFiltersFromUrl(url: URL): FilterState;
+/**
+ * Create a clean filter URL with JSON encoding
+ * This replaces the multiple filter_ params with a single filters param
+ */
+export declare function createFilterUrl(baseUrl: string | URL, filters: FilterState, additionalParams?: Record<string, string | number>): URL;

package/dist/lib/datatable/url-filters.js

@@ -0,0 +1,129 @@
+/**
+ * URL Filter Encoding/Decoding Utilities
+ *
+ * Uses JSON for encoding filter objects into URL parameters.
+ * The URLSearchParams layer handles escaping, and the decoder accepts both
+ * raw JSON and percent-encoded JSON payloads.
+ */
+import * as z from 'zod/v4';
+import { settleNow } from '../attempt';
+import { kitLogger } from '../kit-logger';
+import { FilterJsonTextSchema, FilterValueSchema } from './filter-values';
+const logger = kitLogger('datatable');
+/**
+ * A decoded `filters` payload: an object of filter values whose `search`, when
+ * present, is text. Anything else (`null`, a number, an array, a non-text
+ * `search`) is not a filter state.
+ */
+const FilterStateSchema = z.intersection(z.object({ search: z.string().optional() }), z.record(z.string(), FilterValueSchema));
+const UriDecodedSchema = z.string().transform((text, ctx) => {
+    const decoded = settleNow(() => decodeURIComponent(text));
+    if (decoded.ok)
+        return decoded.value;
+    ctx.issues.push({
+        code: 'custom',
+        message: 'filter text is not URI encoded',
+        input: text,
+        params: { cause: decoded.error }
+    });
+    return z.NEVER;
+});
+/** Drop what a filter payload leaves out: empty text, empty lists, null, undefined. */
+function isFilterValueSet(value) {
+    return !(value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0));
+}
+/** JSON cannot carry bigint; send its decimal text. */
+function jsonSafeFilterValue(_key, value) {
+    return z.bigint().safeParse(value).success ? String(value) : value;
+}
+/**
+ * Encode filters to a compact JSON string for URL
+ */
+export function encodeFilters(filters) {
+    // Remove empty values
+    const cleanFilters = Object.fromEntries(Object.entries(filters).filter(([, value]) => isFilterValueSet(value)));
+    // Return empty string if no filters
+    if (Object.keys(cleanFilters).length === 0) {
+        return '';
+    }
+    return JSON.stringify(cleanFilters, jsonSafeFilterValue);
+}
+/**
+ * Decode filters from a JSON string.
+ *
+ * The payload comes from the URL, so it is untrusted: text that is not JSON
+ * (raw or percent-encoded) or JSON that is not a filter object decodes to no
+ * filters instead of reaching callers as a value they must second-guess.
+ */
+export function decodeFilters(encoded) {
+    if (!encoded) {
+        return {};
+    }
+    const json = FilterJsonTextSchema.safeParse(encoded);
+    const payload = json.success
+        ? json
+        : UriDecodedSchema.pipe(FilterJsonTextSchema).safeParse(encoded);
+    const state = payload.success ? FilterStateSchema.safeParse(payload.data) : undefined;
+    if (!state?.success) {
+        logger.error('Failed to decode filters: payload is not a filter object.');
+        return {};
+    }
+    return state.data;
+}
+/**
+ * Update URL with new filters using JSON encoding
+ */
+export function updateUrlWithFilters(url, filters, options) {
+    const newUrl = new URL(url);
+    const { preserveOtherParams = true, resetPage = true } = options || {};
+    // Clear existing filter params if not preserving
+    if (!preserveOtherParams) {
+        // Clear all params except those we want to keep
+        const keysToKeep = ['page', 'perPage', 'sortBy', 'sortDir'];
+        Array.from(newUrl.searchParams.keys())
+            .filter((key) => !keysToKeep.includes(key))
+            .forEach((key) => newUrl.searchParams.delete(key));
+    }
+    // Encode and set filters
+    const encoded = encodeFilters(filters);
+    if (encoded) {
+        newUrl.searchParams.set('filters', encoded);
+    }
+    else {
+        newUrl.searchParams.delete('filters');
+    }
+    // Reset page if requested
+    if (resetPage) {
+        newUrl.searchParams.set('page', '1');
+    }
+    return newUrl;
+}
+/**
+ * Get filters from URL
+ */
+export function getFiltersFromUrl(url) {
+    const encoded = url.searchParams.get('filters');
+    return decodeFilters(encoded);
+}
+/**
+ * Create a clean filter URL with JSON encoding
+ * This replaces the multiple filter_ params with a single filters param
+ */
+export function createFilterUrl(baseUrl, filters, additionalParams) {
+    const url = new URL(baseUrl);
+    // Set filters
+    const encoded = encodeFilters(filters);
+    if (encoded) {
+        url.searchParams.set('filters', encoded);
+    }
+    // Add additional params
+    if (additionalParams) {
+        for (const [key, value] of Object.entries(additionalParams)) {
+            url.searchParams.set(key, String(value));
+        }
+    }
+    return url;
+}

package/dist/lib/design-inventory/surfaces.d.ts

@@ -0,0 +1,63 @@
+import type { FileSystemAdapterInterface } from '@vibesdotdev/filesystem/interfaces/adapter';
+import type { RuntimePath } from '@vibesdotdev/paths';
+import { type KitSurfaceInventory } from '../schemas/design-inventory.ts';
+export declare const SURFACE_SOURCES: readonly [{
+    readonly group: "ui";
+    readonly directory: "src/lib/components/ui";
+    readonly preview: readonly ["PrimitivePreview", "FamilyPreview", "ContentPreview"];
+    readonly route: "ui";
+    readonly file: "families";
+    readonly symbol: "KIT_UI_FAMILIES";
+}, {
+    readonly group: "shell";
+    readonly directory: "src/lib/components/app-shell";
+    readonly preview: readonly ["ShellPreview"];
+    readonly route: "app-shell";
+    readonly file: "surfaces";
+    readonly symbol: "KIT_SHELL_SURFACES";
+}, {
+    readonly group: "layout";
+    readonly directory: "src/lib/components/layout";
+    readonly preview: readonly ["LayoutPreview"];
+    readonly route: "layout";
+    readonly file: "families";
+    readonly symbol: "KIT_LAYOUT_FAMILIES";
+}, {
+    readonly group: "navigation";
+    readonly directory: "src/lib/components/navigation";
+    readonly preview: readonly ["NavigationPreview"];
+    readonly route: "navigation";
+    readonly file: "families";
+    readonly symbol: "KIT_NAVIGATION_FAMILIES";
+}, {
+    readonly group: "datatable";
+    readonly directory: "src/lib/datatable";
+    readonly preview: readonly ["DatatablePreview"];
+    readonly route: "datatable";
+    readonly file: "families";
+    readonly symbol: "KIT_DATATABLE_FAMILIES";
+}];
+export declare function readText(files: FileSystemAdapterInterface, path: string): Promise<string>;
+export declare function readSurfaces(files: FileSystemAdapterInterface, paths: RuntimePath, root: string): Promise<{
+    surfaces: {
+        ui: string[];
+        shell: string[];
+        layout: string[];
+        navigation: string[];
+        datatable: string[];
+    };
+    previewCoverage: {
+        ok: boolean;
+        missing: {
+            ui: string[];
+            shell: string[];
+            layout: string[];
+            navigation: string[];
+            datatable: string[];
+        };
+    };
+}>;
+export declare function generatedInventories(surfaces: KitSurfaceInventory): {
+    path: string;
+    content: string;
+}[];

package/dist/lib/design-inventory/surfaces.js

@@ -0,0 +1,124 @@
+import * as z from 'zod/v4';
+import { KitPreviewCoverageSchema, KitSurfaceInventorySchema } from "../schemas/design-inventory.js";
+export const SURFACE_SOURCES = [
+    {
+        group: 'ui',
+        directory: 'src/lib/components/ui',
+        preview: ['PrimitivePreview', 'FamilyPreview', 'ContentPreview'],
+        route: 'ui',
+        file: 'families',
+        symbol: 'KIT_UI_FAMILIES'
+    },
+    {
+        group: 'shell',
+        directory: 'src/lib/components/app-shell',
+        preview: ['ShellPreview'],
+        route: 'app-shell',
+        file: 'surfaces',
+        symbol: 'KIT_SHELL_SURFACES'
+    },
+    {
+        group: 'layout',
+        directory: 'src/lib/components/layout',
+        preview: ['LayoutPreview'],
+        route: 'layout',
+        file: 'families',
+        symbol: 'KIT_LAYOUT_FAMILIES'
+    },
+    {
+        group: 'navigation',
+        directory: 'src/lib/components/navigation',
+        preview: ['NavigationPreview'],
+        route: 'navigation',
+        file: 'families',
+        symbol: 'KIT_NAVIGATION_FAMILIES'
+    },
+    {
+        group: 'datatable',
+        directory: 'src/lib/datatable',
+        preview: ['DatatablePreview'],
+        route: 'datatable',
+        file: 'families',
+        symbol: 'KIT_DATATABLE_FAMILIES'
+    }
+];
+export async function readText(files, path) {
+    return z.string().parse(await files.readFile(path, 'utf-8'));
+}
+function isSurfaceMountedInPreview(preview, group, id) {
+    if (preview.includes(`id === '${id}'`) || preview.includes(`id === "${id}"`)) {
+        return true;
+    }
+    return (group === 'ui' &&
+        (preview.includes(`['${id}'`) ||
+            preview.includes(`["${id}"`) ||
+            preview.includes(`, '${id}'`) ||
+            preview.includes(`, "${id}"`)));
+}
+export async function readSurfaces(files, paths, root) {
+    const surfaces = {
+        ui: [],
+        shell: [],
+        layout: [],
+        navigation: [],
+        datatable: []
+    };
+    const missing = {
+        ui: [],
+        shell: [],
+        layout: [],
+        navigation: [],
+        datatable: []
+    };
+    for (const source of SURFACE_SOURCES) {
+        const entries = await files.list(paths.join(root, source.directory));
+        surfaces[source.group] = entries
+            .filter((entry) => source.group === 'ui'
+            ? entry.kind === 'directory' && !entry.name.startsWith('__')
+            : entry.kind === 'file' &&
+                entry.name.endsWith('.svelte') &&
+                !entry.name.includes('.test.') &&
+                !entry.name.includes('.spec.'))
+            .map((entry) => (source.group === 'ui' ? entry.name : entry.name.slice(0, -'.svelte'.length)))
+            .sort();
+        const previews = await Promise.all(source.preview.map((name) => readText(files, paths.join(root, 'src/routes/components', source.route, name + '.svelte'))));
+        const preview = previews.join('\n');
+        missing[source.group] = surfaces[source.group].filter((id) => !isSurfaceMountedInPreview(preview, source.group, id));
+    }
+    return {
+        surfaces: KitSurfaceInventorySchema.parse(surfaces),
+        previewCoverage: KitPreviewCoverageSchema.parse({
+            ok: Object.values(missing).every((ids) => ids.length === 0),
+            missing
+        })
+    };
+}
+export function generatedInventories(surfaces) {
+    return SURFACE_SOURCES.map((source) => ({
+        path: 'src/routes/components/' + source.route + '/' + source.file + '.generated.ts',
+        content: [
+            '/** Generated by @vibesdotdev/kit/design-inventory. Do not edit. */',
+            'export const ' +
+                source.symbol +
+                ' = ' +
+                renderSurfaceIds(surfaces[source.group]) +
+                ' as const;',
+            ''
+        ].join('\n')
+    }));
+}
+/** Match the existing formatted TypeScript inventories, escaping literal contents. */
+function renderSurfaceIds(ids) {
+    if (ids.length === 0)
+        return '[]';
+    const items = ids.map((id) => {
+        const literal = id
+            .replaceAll('\\', '\\\\')
+            .replaceAll("'", "\\'")
+            .replaceAll('\n', '\\n')
+            .replaceAll('\r', '\\r')
+            .replaceAll('\t', '\\t');
+        return "\t'" + literal + "'";
+    });
+    return '[\n' + items.join(',\n') + '\n]';
+}

package/dist/lib/design-inventory.d.ts

@@ -0,0 +1,22 @@
+import { type DesignInventoryImplementation } from '@vibesdotdev/design-tokens/inventory';
+import { type RuntimeRef } from '@vibesdotdev/kernel';
+import { type KitDesignInventory, type KitDesignInventoryInput, type KitDesignGenerationInput, type KitDesignGenerationResult } from './schemas/design-inventory.ts';
+export * from './schemas/design-inventory.ts';
+export { THEME_PRESET_IDS, type ThemePresetId } from './styles/themes/ids.ts';
+export { COLOR_GROUPS } from './components/theme/theme-colors.ts';
+export declare const kitDesignInventoryDescriptor: {
+    id: string;
+    kind: "design/inventory";
+    packageName: string;
+    source: string;
+    enabled: boolean;
+    name?: string | undefined;
+    description?: string | undefined;
+};
+/** Live Kit-owned inventory. No host globals or raw CSS module imports. */
+export declare function readKitDesignInventory(runtime: RuntimeRef, input: KitDesignInventoryInput): Promise<KitDesignInventory>;
+/** Regenerate only Kit's five existing showcase inventories, or report drift without writing. */
+export declare function generateKitDesignInventories(runtime: RuntimeRef, input: KitDesignGenerationInput): Promise<KitDesignGenerationResult>;
+export declare const kitDesignInventoryImplementation: DesignInventoryImplementation<KitDesignInventory, KitDesignGenerationResult>;
+export declare const kitDesignInventoryPlugin: import("@vibesdotdev/kernel").RuntimePlugin;
+export default kitDesignInventoryPlugin;

package/dist/lib/design-inventory.js

@@ -0,0 +1,115 @@
+import { DESIGN_INVENTORY_KIND_ID, DesignInventoryDescriptorSchema, designInventoryKind, openDesignInventoryOwner, syncDesignInventoryProjections } from '@vibesdotdev/design-tokens/inventory';
+import { createRuntimePlugin } from '@vibesdotdev/kernel';
+import * as z from 'zod/v4';
+import { builtInThemePresetCatalog } from "./components/theme/preset-stylesheet.js";
+import { themePresetSchema } from "./components/theme/theme-presets.js";
+import { COLOR_GROUPS } from "./components/theme/theme-colors.js";
+import { THEME_PRESET_IDS } from "./styles/themes/ids.js";
+import { generatedInventories, readSurfaces } from "./design-inventory/surfaces.js";
+import { KitDesignInventoryInputSchema, KitDesignInventorySchema, KitDesignGenerationInputSchema, KitDesignGenerationResultSchema } from "./schemas/design-inventory.js";
+export * from "./schemas/design-inventory.js";
+export { THEME_PRESET_IDS } from "./styles/themes/ids.js";
+export { COLOR_GROUPS } from "./components/theme/theme-colors.js";
+export const kitDesignInventoryDescriptor = DesignInventoryDescriptorSchema.parse({
+    id: 'kit',
+    kind: DESIGN_INVENTORY_KIND_ID,
+    packageName: '@vibesdotdev/kit',
+    source: '@vibesdotdev/kit/design-inventory',
+    name: 'Kit Design Inventory',
+    description: 'Canonical Kit theme preset and surface inventory provider.'
+});
+async function openKitInventoryOwner(runtime, root) {
+    return openDesignInventoryOwner(runtime, {
+        root,
+        packageName: '@vibesdotdev/kit',
+        relativeRootReason: 'kit-inventory-root-relative',
+        relativeRootMessage: 'Kit inventory requires an absolute owner root.'
+    });
+}
+function extractCssSelectorBlock(css, selector) {
+    let searchFrom = 0;
+    while (searchFrom < css.length) {
+        const index = css.indexOf(selector, searchFrom);
+        if (index < 0)
+            return '';
+        const openBrace = css.indexOf('{', index + selector.length);
+        if (openBrace < 0)
+            return '';
+        const between = css.slice(index + selector.length, openBrace).trim();
+        if (between.length === 0) {
+            const closeBrace = css.indexOf('}', openBrace + 1);
+            return closeBrace < 0 ? '' : css.slice(openBrace + 1, closeBrace);
+        }
+        searchFrom = index + selector.length;
+    }
+    return '';
+}
+function cssColors(css, selector) {
+    const block = extractCssSelectorBlock(css, selector);
+    return z.record(z.string(), z.string()).parse(Object.fromEntries(block.split(';').flatMap((declaration) => {
+        const colon = declaration.indexOf(':');
+        const key = declaration.slice(0, colon).trim();
+        const value = declaration.slice(colon + 1).trim();
+        return colon >= 0 && key.startsWith('--') && value ? [[key, value]] : [];
+    })));
+}
+/** Live Kit-owned inventory. No host globals or raw CSS module imports. */
+export async function readKitDesignInventory(runtime, input) {
+    const { root } = KitDesignInventoryInputSchema.parse(input);
+    const host = await openKitInventoryOwner(runtime, root);
+    const css = await host.read(host.paths.join(host.root, 'src/lib/styles/themes/vibes-desktop.css'));
+    const presets = [
+        ...builtInThemePresetCatalog(),
+        themePresetSchema.parse({
+            id: 'vibes-desktop',
+            name: 'Vibes Desktop',
+            description: 'Desktop product identity (violet action on warm paper). Source: vibes-desktop.css.',
+            builtIn: true,
+            colors: { light: cssColors(css, ':root'), dark: cssColors(css, '.dark') },
+            customCss: css
+        })
+    ];
+    const ids = new Set(presets.map((preset) => preset.id));
+    const aliases = {};
+    for (const id of THEME_PRESET_IDS) {
+        if (ids.has(id))
+            continue;
+        const canonical = id === 'default' ? 'vibes' : id.startsWith('shadcn-') ? id.slice(7) : 'shadcn-' + id;
+        if (ids.has(canonical))
+            aliases[id] = canonical;
+    }
+    const surfaceInventory = await readSurfaces(host.files, host.paths, host.root);
+    return KitDesignInventorySchema.parse({
+        presets,
+        presetIds: [...THEME_PRESET_IDS],
+        aliases,
+        colorGroups: COLOR_GROUPS.map((group) => ({ ...group, lightOnly: Boolean(group.lightOnly) })),
+        requiredKeys: COLOR_GROUPS.flatMap((group) => group.vars.map((item) => item.key)),
+        requiredKeysLightOnly: COLOR_GROUPS.filter((group) => group.lightOnly).flatMap((group) => group.vars.map((item) => item.key)),
+        ...surfaceInventory
+    });
+}
+/** Regenerate only Kit's five existing showcase inventories, or report drift without writing. */
+export async function generateKitDesignInventories(runtime, input) {
+    const { root, check } = KitDesignGenerationInputSchema.parse(input);
+    const host = await openKitInventoryOwner(runtime, root);
+    const { surfaces, previewCoverage } = await readSurfaces(host.files, host.paths, host.root);
+    const { written, stale } = await syncDesignInventoryProjections(host, generatedInventories(surfaces), check);
+    return KitDesignGenerationResultSchema.parse({ written, stale, previewCoverage });
+}
+export const kitDesignInventoryImplementation = {
+    read: (runtime, input) => readKitDesignInventory(runtime, input),
+    generate: (runtime, input) => generateKitDesignInventories(runtime, input)
+};
+export const kitDesignInventoryPlugin = createRuntimePlugin({
+    id: 'kit-design-inventory',
+    name: 'Kit Design Inventory',
+    kinds: [designInventoryKind],
+    descriptors: [kitDesignInventoryDescriptor],
+    async onRegister(runtime) {
+        runtime.registerLoader(DESIGN_INVENTORY_KIND_ID, kitDesignInventoryDescriptor.id, async () => ({
+            impl: kitDesignInventoryImplementation
+        }));
+    }
+});
+export default kitDesignInventoryPlugin;

package/dist/lib/elements/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @vibesdotdev/kit/elements
+ *
+ * Registers custom elements on import. Bundle is consumed via a
+ * `<script type="module" src=".../elements.js">` tag on any vibes
+ * surface (git.vibes.dev, packages.vibes.dev, etc.). Once loaded:
+ *
+ *   <vibes-brand-bar app="git"></vibes-brand-bar>
+ * are usable anywhere in the host page's DOM.
+ *
+ * Shadow DOM is enabled per element; CSS custom properties (`--vibes-*`)
+ * pierce the shadow boundary, so any host that loads the registry-theme
+ * tokens.css will style these correctly.
+ */
+import './lib/BrandBar.svelte';
+export declare const VIBES_ELEMENTS_VERSION = "0.0.1";

package/dist/lib/elements/index.js

@@ -0,0 +1,16 @@
+/**
+ * @vibesdotdev/kit/elements
+ *
+ * Registers custom elements on import. Bundle is consumed via a
+ * `<script type="module" src=".../elements.js">` tag on any vibes
+ * surface (git.vibes.dev, packages.vibes.dev, etc.). Once loaded:
+ *
+ *   <vibes-brand-bar app="git"></vibes-brand-bar>
+ * are usable anywhere in the host page's DOM.
+ *
+ * Shadow DOM is enabled per element; CSS custom properties (`--vibes-*`)
+ * pierce the shadow boundary, so any host that loads the registry-theme
+ * tokens.css will style these correctly.
+ */
+import './lib/BrandBar.svelte';
+export const VIBES_ELEMENTS_VERSION = '0.0.1';