@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/generative/streaming.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/generative/tools.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/generative/useGenerativeStream.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { useStreamingSSE } from '../../hooks/useStreamingSSE.js';
 import { parseStreamingSpec } from './streaming.js';

package/dist/components/generative/validate.d.ts

@@ -3,7 +3,7 @@ import { GenerativeSchemaDoc } from "./schemaTypes";
 export interface ValidationIssue {
     /** JSONPath-ish locator, e.g. `$.children[2].props.color`. */
     path: string;
-    code: "invalid-node" | "unknown-component" | "blocked-prop" | "unknown-prop" | "invalid-enum" | "coerced-value" | "invalid-value" | "invalid-shape" | "missing-required" | "applied-default" | "children-ignored" | "invalid-action";
+    code: "invalid-node" | "unknown-component" | "blocked-prop" | "unknown-prop" | "invalid-enum" | "coerced-value" | "invalid-value" | "invalid-shape" | "missing-required" | "applied-default" | "children-ignored" | "invalid-action" | "max-depth-exceeded";
     message: string;
     severity: "error" | "warning";
 }

package/dist/components/generative/validate.js

@@ -2,7 +2,88 @@ import { GENERATIVE_SCHEMA } from './schema.generated.js';
 
 /** Props that are NEVER accepted from a spec, regardless of schema. */
 const BLOCKED_PROPS = new Set(["className", "style", "ref", "key", "theme", "dangerouslySetInnerHTML"]);
-const isHandler = (key) => /^on[A-Z]/.test(key);
+/**
+ * Keys that hijack the prototype chain when used as an assignment target
+ * (`obj["__proto__"] = v` invokes the setter; `constructor`/`prototype` shadow).
+ * They must never be written into a rebuilt object from spec input — denied at
+ * every dynamic-write site with a recorded issue, since `safeLookup` only guards
+ * the read/lookup sites.
+ */
+const PROTO_POLLUTION_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+/**
+ * Any prop whose name begins with "on" (case-insensitively) is treated as a
+ * DOM/React event handler and blocked, regardless of casing — `onClick`,
+ * `onclick`, `ONLOAD`, `oNcLiCk` are all the same injection vector. This is
+ * intentionally broader than the exact-case convention: the curated schema
+ * has no legitimate prop that starts with "on" (verified against
+ * `schema.generated.ts`), so there is no allow-listed prop this can
+ * newly/incorrectly block.
+ */
+const isHandler = (key) => /^on[a-z]/i.test(key);
+/** Recursion guard for both the node tree and nested structured prop values. */
+const MAX_DEPTH = 100;
+/**
+ * Safe lookup on a plain object used as a string-keyed map. Guards against
+ * Object.prototype-colliding keys ("constructor", "toString", "__proto__",
+ * "hasOwnProperty", …) resolving an INHERITED member instead of `undefined` —
+ * which would otherwise let an unknown key silently skip its "not found"
+ * branch (or crash downstream code that assumes a `ComponentSchema`/`SchemaProp`).
+ */
+function safeLookup(map, key) {
+    return Object.hasOwn(map, key) ? map[key] : undefined;
+}
+/**
+ * Recursively strip blocked keys / function values from an arbitrary value
+ * nested inside a structured ("shape") prop — chartConfig, donutColors,
+ * gridCols breakpoint maps, and each item of array-of-object shapes
+ * (tableColumns, accordionItems, …) all funnel through this so the injection
+ * guard applies at every depth, not just the top-level props map. Never
+ * throws; bottoms out at MAX_DEPTH rather than recursing unboundedly.
+ */
+function sanitizeStructuredValue(value, path, issues, depth = 0) {
+    if (depth > MAX_DEPTH) {
+        issues.push({
+            path,
+            code: "max-depth-exceeded",
+            severity: "warning",
+            message: `Maximum nesting depth (${MAX_DEPTH}) exceeded — value pruned`,
+        });
+        return undefined;
+    }
+    if (typeof value === "function") {
+        issues.push({
+            path,
+            code: "blocked-prop",
+            severity: "warning",
+            message: "Function value is not accepted from a spec (injection guard) — removed",
+        });
+        return undefined;
+    }
+    if (Array.isArray(value)) {
+        return value
+            .map((v, i) => sanitizeStructuredValue(v, `${path}[${i}]`, issues, depth + 1))
+            .filter((v) => v !== undefined);
+    }
+    if (value !== null && typeof value === "object") {
+        const next = {};
+        for (const [k, v] of Object.entries(value)) {
+            if (BLOCKED_PROPS.has(k) || isHandler(k) || PROTO_POLLUTION_KEYS.has(k)) {
+                issues.push({
+                    path: `${path}.${k}`,
+                    code: "blocked-prop",
+                    severity: "warning",
+                    message: `"${k}" removed (injection guard)`,
+                });
+                continue;
+            }
+            const sanitized = sanitizeStructuredValue(v, `${path}.${k}`, issues, depth + 1);
+            if (sanitized !== undefined)
+                next[k] = sanitized;
+        }
+        return next;
+    }
+    return value;
+}
 /**
  * Validate + repair a model-emitted spec against the generated schema.
  * Never throws; never mutates the input. Every repair is recorded in `issues`.
@@ -14,17 +95,26 @@ function validate(spec, options = {}) {
     const schema = (_a = options.schema) !== null && _a !== void 0 ? _a : GENERATIVE_SCHEMA;
     const issues = [];
     if (Array.isArray(spec)) {
-        return { spec: spec.map((n, i) => validateNode(n, schema, `$[${i}]`, issues)), issues };
+        return { spec: spec.map((n, i) => validateNode(n, schema, `$[${i}]`, issues, 0)), issues };
     }
-    return { spec: validateNode(spec, schema, "$", issues), issues };
+    return { spec: validateNode(spec, schema, "$", issues, 0), issues };
 }
-function validateNode(node, schema, path, issues) {
+function validateNode(node, schema, path, issues, depth) {
+    if (depth > MAX_DEPTH) {
+        issues.push({
+            path,
+            code: "max-depth-exceeded",
+            severity: "error",
+            message: `Maximum nesting depth (${MAX_DEPTH}) exceeded — node pruned`,
+        });
+        return { component: "__invalid__" };
+    }
     if (!node || typeof node !== "object" || typeof node.component !== "string") {
         issues.push({ path, code: "invalid-node", severity: "error", message: "Node is not an object with a string `component`" });
         return { component: "__invalid__" };
     }
     const raw = node;
-    const comp = schema.components[raw.component];
+    const comp = safeLookup(schema.components, raw.component);
     if (!comp) {
         issues.push({
             path,
@@ -68,16 +158,28 @@ function validateNode(node, schema, path, issues) {
             });
         }
         else {
-            children = raw.children.map((c, i) => validateNode(c, schema, `${path}.children[${i}]`, issues));
+            children = raw.children.map((c, i) => validateNode(c, schema, `${path}.children[${i}]`, issues, depth + 1));
         }
     }
     let actions;
     if (raw.actions && typeof raw.actions === "object") {
         for (const [key, descriptor] of Object.entries(raw.actions)) {
+            if (PROTO_POLLUTION_KEYS.has(key)) {
+                issues.push({
+                    path: `${path}.actions.${key}`,
+                    code: "blocked-prop",
+                    severity: "warning",
+                    message: `Action name "${key}" removed (injection guard)`,
+                });
+                continue;
+            }
             if (descriptor && typeof descriptor === "object" && typeof descriptor.type === "string") {
+                const payload = descriptor.payload !== undefined
+                    ? sanitizeStructuredValue(descriptor.payload, `${path}.actions.${key}.payload`, issues)
+                    : undefined;
                 (actions !== null && actions !== void 0 ? actions : (actions = {}))[key] = {
                     type: descriptor.type,
-                    ...(descriptor.payload !== undefined ? { payload: descriptor.payload } : {}),
+                    ...(payload !== undefined ? { payload } : {}),
                 };
             }
             else {
@@ -112,7 +214,7 @@ function sanitizeProps(rawProps, comp, schema, path, issues) {
             });
             continue;
         }
-        const ps = comp.props[key];
+        const ps = safeLookup(comp.props, key);
         if (!ps) {
             issues.push({
                 path: propPath,
@@ -213,13 +315,17 @@ function checkValue(key, value, ps, schema, path, issues) {
         }
         case "shape": {
             if (ps.shape === "gridCols") {
-                if (typeof value === "number" || (value !== null && typeof value === "object" && !Array.isArray(value)))
+                if (typeof value === "number")
                     return value;
+                if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+                    return sanitizeStructuredValue(value, path, issues);
+                }
                 return drop(`Expected a number or breakpoint map, got ${JSON.stringify(value)}`, "invalid-shape");
             }
             if (ps.shape === "chartConfig" || ps.shape === "donutColors") {
-                if (value !== null && typeof value === "object" && !Array.isArray(value))
-                    return value;
+                if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+                    return sanitizeStructuredValue(value, path, issues);
+                }
                 return drop(`Expected an object, got ${JSON.stringify(value)}`, "invalid-shape");
             }
             // every other shape is an array of objects
@@ -234,24 +340,10 @@ function checkValue(key, value, ps, schema, path, issues) {
                     message: `${value.length - cleaned.length} non-object item(s) removed from "${key}"`,
                 });
             }
-            // strip blocked/handler keys inside structured items (injection guard at depth)
-            return cleaned.map((item) => {
-                const obj = item;
-                const next = {};
-                for (const [k, v] of Object.entries(obj)) {
-                    if (BLOCKED_PROPS.has(k) || isHandler(k)) {
-                        issues.push({
-                            path: `${path}.${k}`,
-                            code: "blocked-prop",
-                            severity: "warning",
-                            message: `"${k}" inside "${key}" removed (injection guard)`,
-                        });
-                        continue;
-                    }
-                    next[k] = v;
-                }
-                return next;
-            });
+            // strip blocked/handler keys (recursively, at any depth) inside structured items
+            return cleaned
+                .map((item, i) => sanitizeStructuredValue(item, `${path}[${i}]`, issues))
+                .filter((v) => v !== undefined);
         }
     }
 }

package/dist/components/generative/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/layout/AppShell/AppShell.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/layout/AppShell/AppShellContext.js

@@ -1,3 +1,4 @@
+"use client";
 import React__default from 'react';
 
 const AppShellContext = React__default.createContext(undefined);

package/dist/components/layout/AppShell/AppShellMain.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/layout/AppShell/AppShellRightPanel.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/layout/AppShell/AppShellSidebar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/layout/FormLayout/FormLayout.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { Separator } from '../../core/Separator/Separator.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
-import { Separator } from '../../core/Separator/Separator.js';
 
 const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {

package/dist/components/layout/FormLayout/FormLayoutSection.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/layout/Grid/Grid.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { GridProps } from "./Grid.types";
-export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/Grid/Grid.js

@@ -1,4 +1,3 @@
-import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { gridTheme } from './Grid.theme.js';
@@ -22,7 +21,8 @@ function resolveCols(cols, theme) {
     });
     return parts.join(" ");
 }
-const Grid = React__default.forwardRef(({ cols = 1, gap = 4, flow, align, justify, className, theme: customTheme = {}, ...props }, ref) => {
+const Grid = React__default.forwardRef(({ as, cols = 1, gap = 4, flow, align, justify, className, theme: customTheme = {}, ...props }, ref) => {
+    const Component = as || "div";
     const theme = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         return ({
@@ -43,7 +43,15 @@ const Grid = React__default.forwardRef(({ cols = 1, gap = 4, flow, align, justif
             justify: { ...gridTheme.justify, ...customTheme.justify },
         });
     }, [customTheme]);
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, resolveCols(cols, theme), theme.gaps[gap], flow && theme.flow[flow], align && theme.align[align], justify && theme.justify[justify], className), ...props }));
+    // React.createElement (not JSX) for the dynamic tag: JSX's intrinsic-tag
+    // resolution intersects the ref type across every tag in the `as` union
+    // (HTMLDivElement & HTMLUListElement & …), which a single `Ref<HTMLElement>`
+    // can never satisfy. createElement's typing doesn't do that per-tag narrowing.
+    return React__default.createElement(Component, {
+        ref,
+        className: cn(theme.baseStyle, resolveCols(cols, theme), theme.gaps[gap], flow && theme.flow[flow], align && theme.align[align], justify && theme.justify[justify], className),
+        ...props,
+    });
 });
 Grid.displayName = "Grid";
 

package/dist/components/layout/Grid/Grid.types.d.ts

@@ -8,6 +8,13 @@ export type GridAlign = "start" | "center" | "end" | "stretch";
 export type GridJustify = "start" | "center" | "end" | "between";
 /** A single column count (mobile-safe auto-ramp) OR an explicit per-breakpoint map. */
 export type GridCols = number | Partial<Record<Breakpoint, number>>;
+/**
+ * Tag names the layout primitives (Grid, Stack) may render as via `as`.
+ * A curated string union, not a full `React.ElementType` — keeps it
+ * JSON-serializable (generative-UI schema safe, §22) and rules out
+ * semantically broken choices.
+ */
+export type LayoutTag = "div" | "ul" | "ol" | "nav" | "section" | "header" | "footer" | "aside" | "form" | "fieldset";
 export interface GridTheme {
     baseStyle: string;
     /** cols={n} → a full responsive class string (mobile-first ramp). */
@@ -28,7 +35,14 @@ export interface GridThemeOverrides {
     align?: Partial<Record<GridAlign, string>>;
     justify?: Partial<Record<GridJustify, string>>;
 }
-export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+export interface GridProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Render as a different tag — e.g. `as="ul"` for a card grid that should be
+     * announced as a list. Swaps only the wrapping element; children are not
+     * auto-wrapped (pass `<li>` yourself for `as="ul"`/`"ol"`).
+     * @default "div"
+     */
+    as?: LayoutTag;
     /**
      * Columns: a number (mobile-safe auto-ramp) or a per-breakpoint map.
      *

package/dist/components/layout/Grid/index.d.ts

@@ -1,3 +1,3 @@
 export { Grid } from "./Grid";
-export type { GridProps, GridTheme, GridThemeOverrides, GridCols, GridGap, GridFlow, GridAlign, GridJustify, Breakpoint, } from "./Grid.types";
+export type { GridProps, GridTheme, GridThemeOverrides, GridCols, GridGap, GridFlow, GridAlign, GridJustify, Breakpoint, LayoutTag, } from "./Grid.types";
 export { gridTheme } from "./Grid.theme";

package/dist/components/layout/Section/Section.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/layout/Stack/Stack.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { StackProps } from "./Stack.types";
-export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/Stack/Stack.js

@@ -1,9 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { stackTheme } from './Stack.theme.js';
 
-const Stack = React__default.forwardRef(({ direction = "col", gap = 4, align, justify, wrap = false, className, theme: customTheme = {}, ...props }, ref) => {
+const Stack = React__default.forwardRef(({ as, direction = "col", gap = 4, align, justify, wrap = false, className, theme: customTheme = {}, ...props }, ref) => {
+    const Component = as || "div";
     const theme = useMemo(() => ({
         ...stackTheme,
         ...customTheme,
@@ -12,7 +12,15 @@ const Stack = React__default.forwardRef(({ direction = "col", gap = 4, align, ju
         align: { ...stackTheme.align, ...customTheme.align },
         justify: { ...stackTheme.justify, ...customTheme.justify },
     }), [customTheme]);
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, theme.direction[direction], theme.gaps[gap], align && theme.align[align], justify && theme.justify[justify], wrap && theme.wrap, className), ...props }));
+    // React.createElement (not JSX) for the dynamic tag: JSX's intrinsic-tag
+    // resolution intersects the ref type across every tag in the `as` union
+    // (HTMLDivElement & HTMLUListElement & …), which a single `Ref<HTMLElement>`
+    // can never satisfy. createElement's typing doesn't do that per-tag narrowing.
+    return React__default.createElement(Component, {
+        ref,
+        className: cn(theme.baseStyle, theme.direction[direction], theme.gaps[gap], align && theme.align[align], justify && theme.justify[justify], wrap && theme.wrap, className),
+        ...props,
+    });
 });
 Stack.displayName = "Stack";
 

package/dist/components/layout/Stack/Stack.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { GridGap, GridAlign, GridJustify } from "../Grid/Grid.types";
+import { GridGap, GridAlign, GridJustify, LayoutTag } from "../Grid/Grid.types";
 export type StackDirection = "row" | "col";
 export interface StackTheme {
     baseStyle: string;
@@ -17,7 +17,14 @@ export interface StackThemeOverrides {
     justify?: Partial<Record<GridJustify, string>>;
     wrap?: string;
 }
-export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Render as a different tag — e.g. `as="nav"` for a stack of nav links, or
+     * `as="ul"` for a stack of list items. Swaps only the wrapping element;
+     * children are not auto-wrapped (pass `<li>` yourself for `as="ul"`/`"ol"`).
+     * @default "div"
+     */
+    as?: LayoutTag;
     /**
      * Flex direction.
      * @default "col"

package/dist/components/layout/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./FormLayout";
-export * from "./PageLayout";
 export * from "./AppShell";
 export * from "./Grid";
 export * from "./Stack";

package/dist/components/layout/index.js

@@ -1,7 +1,5 @@
 export { FormLayout } from './FormLayout/FormLayout.js';
 export { formLayoutTheme } from './FormLayout/FormLayout.theme.js';
-export { PageLayout } from './PageLayout/PageLayout.js';
-export { pageLayoutTheme } from './PageLayout/PageLayout.theme.js';
 export { AppShell } from './AppShell/AppShell.js';
 export { appShellTheme, getAppShellTheme } from './AppShell/AppShell.theme.js';
 export { Grid } from './Grid/Grid.js';