@lynx-js/genui 0.0.1-rc.0

package/openui/README.md

@@ -0,0 +1,211 @@
+# @lynx-js/genui/openui
+
+ReactLynx renderer for the [OpenUI DSL](https://www.openui.com/). Parses
+OpenUI functional notation into a renderable tree and renders it via a
+pluggable component catalog in Lynx applications.
+
+This package includes:
+
+- `createOpenUiLibrary`: factory that builds an OpenUI `Library` instance
+  with built-in components, fully customizable via options.
+- `defineComponent`: define custom components with Zod-validated props.
+- `OpenUiRenderer`: ReactLynx component that renders a parsed OpenUI tree.
+- `createParser` / `createStreamingParser`: parse OpenUI DSL text
+  (functional notation) into a renderable AST.
+- `catalog/*`: built-in component renderers (Stack, Card, CardHeader,
+  TextContent, Separator, Button, Buttons, Tag).
+
+## Exports
+
+- `@lynx-js/genui/openui`: `createOpenUiLibrary`, `defineComponent`,
+  `OpenUiRenderer`, parser utilities, and all core types.
+- `@lynx-js/genui/openui/catalog`: re-exports of built-in catalog
+  components for tree-shake-friendly subpath access.
+
+## Installation
+
+Make sure your app provides the peer dependencies:
+
+- `@lynx-js/react`
+
+```bash
+pnpm add @lynx-js/genui
+```
+
+## Quick Start
+
+1. Create a library and get its JSON Schema.
+2. Create a streaming parser from the schema.
+3. Feed OpenUI DSL text (chunks or full) into the parser.
+4. Render the parse result with `<OpenUiRenderer>`.
+
+```tsx
+import {
+  createOpenUiLibrary,
+  createStreamingParser,
+  OpenUiRenderer,
+} from '@lynx-js/genui/openui';
+import type { ParseResult } from '@lynx-js/genui/openui';
+import { useEffect, useMemo, useState } from '@lynx-js/react';
+
+const library = createOpenUiLibrary();
+const schema = library.toJSONSchema();
+
+export function App() {
+  const [result, setResult] = useState<ParseResult | null>(null);
+
+  useEffect(() => {
+    const parser = createStreamingParser(schema);
+
+    // OpenUI DSL uses functional notation:
+    const rawText = `
+root = Stack([header, card], "column", "l", "center")
+header = TextContent("Hello OpenUI", "large-heavy")
+card = Card([content, btn], "card")
+content = TextContent("Welcome to OpenUI")
+btn = Buttons([Button("Get Started", Action([@ToAssistant("clicked")]), "primary")])
+    `.trim();
+
+    // Feed the entire text (or stream it chunk by chunk)
+    const parsed = parser.push(rawText);
+    setResult(parsed);
+  }, []);
+
+  if (!result?.root) return null;
+
+  return (
+    <OpenUiRenderer
+      result={result}
+      library={library}
+      onAction={(event) => {
+        console.log('Action:', event.humanFriendlyMessage);
+      }}
+    />
+  );
+}
+```
+
+## Streaming
+
+For real-time streaming scenarios (e.g., LLM output), feed chunks
+incrementally:
+
+```tsx
+import {
+  createOpenUiLibrary,
+  createStreamingParser,
+  OpenUiRenderer,
+} from '@lynx-js/genui/openui';
+import type { ParseResult } from '@lynx-js/genui/openui';
+import { useEffect, useMemo, useRef, useState } from '@lynx-js/react';
+
+const CHUNK_SIZE = 8;
+const STREAM_DELAY_MS = 30;
+
+export function StreamingApp({ rawText }: { rawText: string }) {
+  const library = useMemo(() => createOpenUiLibrary(), []);
+  const [result, setResult] = useState<ParseResult | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setIsStreaming(true);
+
+    const schema = library.toJSONSchema();
+    const parser = createStreamingParser(schema);
+    let offset = 0;
+
+    const tick = () => {
+      if (cancelled || offset >= rawText.length) {
+        setIsStreaming(false);
+        return;
+      }
+      const chunk = rawText.slice(offset, offset + CHUNK_SIZE);
+      offset += CHUNK_SIZE;
+      setResult(parser.push(chunk));
+      setTimeout(tick, STREAM_DELAY_MS);
+    };
+
+    tick();
+    return () => {
+      cancelled = true;
+    };
+  }, [library, rawText]);
+
+  if (!result?.root) return null;
+
+  return (
+    <OpenUiRenderer
+      result={result}
+      library={library}
+      isStreaming={isStreaming}
+    />
+  );
+}
+```
+
+## Customizing the Library
+
+`createOpenUiLibrary` accepts an optional `CreateOpenUiLibraryOptions`
+object. Provided `components` and `componentGroups` are **merged** with
+the built-in defaults (appended after the defaults):
+
+```tsx
+import { createOpenUiLibrary, defineComponent } from '@lynx-js/genui/openui';
+import { z } from 'zod/v4';
+
+const MyBanner = defineComponent({
+  name: 'Banner',
+  description: 'A promotional banner',
+  props: z.object({ title: z.string(), color: z.string().optional() }),
+  component: (props) => (
+    <view style={{ backgroundColor: props.color ?? '#f0f0f0' }}>
+      <text>{props.title}</text>
+    </view>
+  ),
+});
+
+const library = createOpenUiLibrary({
+  root: 'Stack',
+  components: [MyBanner],
+  componentGroups: [
+    { name: 'Custom', components: ['Banner'] },
+  ],
+});
+```
+
+### Options
+
+| Option            | Type                 | Default       | Description                                    |
+| ----------------- | -------------------- | ------------- | ---------------------------------------------- |
+| `root`            | `string`             | `'Stack'`     | Name of the root component                     |
+| `components`      | `DefinedComponent[]` | `[]` (merged) | Additional components appended to built-in set |
+| `componentGroups` | `ComponentGroup[]`   | `[]` (merged) | Additional groups appended to built-in groups  |
+
+## OpenUI DSL Syntax
+
+The DSL uses a **functional notation** (not XML). Each statement assigns
+a component instance to an identifier:
+
+```
+root = Stack([header, card], "column", "l", "center")
+header = TextContent("Choose Your Plan", "large-heavy")
+card = Card([cardHeader, sep, features, btn], "card")
+cardHeader = CardHeader("Pro", "For growing teams")
+sep = Separator("horizontal", true)
+features = Stack([f1, f2], "column", "s")
+f1 = TextContent("✓  Unlimited projects")
+f2 = TextContent("✓  Priority support")
+btn = Buttons([Button("Start Trial", Action([@ToAssistant("start")]), "primary")])
+```
+
+## JSON Schema
+
+Generate a JSON Schema representation of the library for LLM agent
+handshakes:
+
+```ts
+const library = createOpenUiLibrary();
+const schema = library.toJSONSchema();
+// Pass `schema` to your LLM / agent for structured output generation.
+```

package/openui/dist/catalog/Action/index.d.ts

@@ -0,0 +1,20 @@
+import type { ActionEvent, ActionPlan } from '@openuidev/lang-core';
+import { z } from 'zod/v4';
+/** Shared action prop schema — shows as `ActionExpression` in prompt signatures. */
+export interface LegacyActionConfig {
+    type?: ActionEvent['type'];
+    params?: Record<string, unknown>;
+    url?: string;
+    context?: string;
+}
+export type ActionLike = ActionPlan | LegacyActionConfig;
+export declare const actionPropSchema: z.ZodUnion<readonly [z.ZodObject<{
+    steps: z.ZodArray<z.ZodObject<{
+        type: z.ZodString;
+    }, z.core.$loose>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodOptional<z.ZodString>;
+    params: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    url: z.ZodOptional<z.ZodString>;
+    context: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>]>;

package/openui/dist/catalog/Action/index.js

@@ -0,0 +1,23 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { tagSchemaId } from '@openuidev/lang-core';
+import { z } from 'zod/v4';
+const actionStepSchema = z.looseObject({
+    type: z.string(),
+});
+const actionPlanSchema = z.object({
+    steps: z.array(actionStepSchema),
+});
+const legacyActionSchema = z.object({
+    type: z.string().optional(),
+    params: z.record(z.string(), z.any()).optional(),
+    url: z.string().optional(),
+    context: z.string().optional(),
+});
+export const actionPropSchema = z.union([
+    actionPlanSchema,
+    legacyActionSchema,
+]);
+tagSchemaId(actionPropSchema, 'ActionExpression');
+//# sourceMappingURL=index.js.map

package/openui/dist/catalog/Action/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/Action/index.tsx"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAY3B,MAAM,gBAAgB,GAAG,CAAC,CAAC,WAAW,CAAC;IACrC,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE;CACjB,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC;IAChC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,CAAC,CAAC,MAAM,CAAC;IAClC,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE;IAChD,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC1B,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CAC/B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,CAAC;IACtC,gBAAgB;IAChB,kBAAkB;CACnB,CAAC,CAAC;AACH,WAAW,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC"}

package/openui/dist/catalog/Button/index.d.ts

@@ -0,0 +1,64 @@
+import { z } from 'zod/v4';
+export declare const Button: import("../../core/library.js").DefinedComponent<z.ZodObject<{
+    label: z.ZodString;
+    action: z.ZodUnion<readonly [z.ZodObject<{
+        steps: z.ZodArray<z.ZodObject<{
+            type: z.ZodString;
+        }, z.core.$loose>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodOptional<z.ZodString>;
+        params: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        url: z.ZodOptional<z.ZodString>;
+        context: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>]>;
+    variant: z.ZodOptional<z.ZodEnum<{
+        primary: "primary";
+        secondary: "secondary";
+        tertiary: "tertiary";
+    }>>;
+    type: z.ZodOptional<z.ZodEnum<{
+        normal: "normal";
+        destructive: "destructive";
+    }>>;
+    size: z.ZodOptional<z.ZodEnum<{
+        "extra-small": "extra-small";
+        small: "small";
+        medium: "medium";
+        large: "large";
+    }>>;
+}, z.core.$strip>>;
+export declare const Buttons: import("../../core/library.js").DefinedComponent<z.ZodObject<{
+    buttons: z.ZodArray<z.core.$ZodType<import("@openuidev/lang-core").SubComponentOf<{
+        label: string;
+        action: {
+            steps: {
+                [x: string]: unknown;
+                type: string;
+            }[];
+        } | {
+            type?: string | undefined;
+            params?: Record<string, any> | undefined;
+            url?: string | undefined;
+            context?: string | undefined;
+        };
+        variant?: "primary" | "secondary" | "tertiary" | undefined;
+        type?: "normal" | "destructive" | undefined;
+        size?: "extra-small" | "small" | "medium" | "large" | undefined;
+    }>, unknown, z.core.$ZodTypeInternals<import("@openuidev/lang-core").SubComponentOf<{
+        label: string;
+        action: {
+            steps: {
+                [x: string]: unknown;
+                type: string;
+            }[];
+        } | {
+            type?: string | undefined;
+            params?: Record<string, any> | undefined;
+            url?: string | undefined;
+            context?: string | undefined;
+        };
+        variant?: "primary" | "secondary" | "tertiary" | undefined;
+        type?: "normal" | "destructive" | undefined;
+        size?: "extra-small" | "small" | "medium" | "large" | undefined;
+    }>, unknown>>>;
+}, z.core.$strip>>;

package/openui/dist/catalog/Button/index.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { BuiltinActionType } from '@openuidev/lang-core';
+import { z } from 'zod/v4';
+import { useFormName, useIsStreaming, useTriggerAction, } from '../../core/context.js';
+import { useFormValidation } from '../../core/hooks/index.js';
+import { defineComponent } from '../../core/library.js';
+import { actionPropSchema } from '../Action/index.js';
+import { asArray } from '../utils.js';
+const CONTINUE_CONVERSATION_ACTION = String(BuiltinActionType.ContinueConversation);
+const OPEN_URL_ACTION = String(BuiltinActionType.OpenUrl);
+const buttonPropsSchema = z.object({
+    label: z.string(),
+    action: actionPropSchema,
+    variant: z.enum(['primary', 'secondary', 'tertiary']).optional(),
+    type: z.enum(['normal', 'destructive']).optional(),
+    size: z.enum(['extra-small', 'small', 'medium', 'large']).optional(),
+});
+function ButtonRenderer({ props }) {
+    const triggerAction = useTriggerAction();
+    const formName = useFormName();
+    const isStreaming = useIsStreaming();
+    const formValidation = useFormValidation();
+    const label = String(props.label ?? '');
+    const variant = props.variant ?? 'primary';
+    const action = props.action;
+    let className = 'OpenUIButton OpenUIButtonPrimary';
+    if (variant === 'secondary') {
+        className = 'OpenUIButton OpenUIButtonSecondary';
+    }
+    else if (variant === 'tertiary') {
+        className = 'OpenUIButton OpenUIButtonGhost';
+    }
+    const onTap = () => {
+        const legacyAction = action && !('steps' in action) ? action : undefined;
+        const actionType = legacyAction?.type ?? CONTINUE_CONVERSATION_ACTION;
+        if (formValidation && variant === 'primary'
+            && actionType === CONTINUE_CONVERSATION_ACTION) {
+            const valid = formValidation.validateForm();
+            if (!valid)
+                return;
+        }
+        const actionParams = actionType === OPEN_URL_ACTION
+            ? { url: legacyAction?.url }
+            : {
+                ...(legacyAction?.params ?? {}),
+                ...(legacyAction?.context ? { context: legacyAction.context } : {}),
+            };
+        void triggerAction(label, formName, {
+            type: actionType,
+            params: actionParams,
+        });
+    };
+    return (_jsx("view", { className: className, ...(isStreaming ? {} : ({ bindtap: onTap })), children: _jsx("text", { className: 'OpenUIButtonText', children: label }) }));
+}
+export const Button = defineComponent({
+    name: 'Button',
+    props: buttonPropsSchema,
+    description: 'Clickable button',
+    component: ButtonRenderer,
+});
+function ButtonsRenderer({ props, renderNode }) {
+    return (_jsx("view", { className: 'OpenUIButtonGroup', children: renderNode(asArray(props.buttons)) }));
+}
+export const Buttons = defineComponent({
+    name: 'Buttons',
+    props: z.object({
+        buttons: z.array(Button.ref),
+    }),
+    description: 'Button group',
+    component: ButtonsRenderer,
+});
+//# sourceMappingURL=index.js.map

package/openui/dist/catalog/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/Button/index.tsx"],"names":[],"mappings":"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"}

package/openui/dist/catalog/Card/index.d.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod/v4';
+export declare const Card: import("../../core/library.js").DefinedComponent<z.ZodObject<{
+    children: z.ZodArray<z.ZodAny>;
+    variant: z.ZodOptional<z.ZodEnum<{
+        card: "card";
+        sunk: "sunk";
+        clear: "clear";
+    }>>;
+    direction: z.ZodOptional<z.ZodEnum<{
+        row: "row";
+        column: "column";
+    }>>;
+    wrap: z.ZodOptional<z.ZodBoolean>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        none: "none";
+        xs: "xs";
+        s: "s";
+        m: "m";
+        l: "l";
+        xl: "xl";
+    }>>;
+    align: z.ZodOptional<z.ZodEnum<{
+        start: "start";
+        center: "center";
+        end: "end";
+        stretch: "stretch";
+    }>>;
+    justify: z.ZodOptional<z.ZodEnum<{
+        start: "start";
+        center: "center";
+        end: "end";
+        between: "between";
+    }>>;
+}, z.core.$strip>>;

package/openui/dist/catalog/Card/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+import { defineComponent } from '../../core/library.js';
+import { GAP_CLASS, asArray } from '../utils.js';
+function getAlignClass(align) {
+    switch (align) {
+        case 'start':
+            return 'OpenUIAlignStart';
+        case 'center':
+            return 'OpenUIAlignCenter';
+        case 'end':
+            return 'OpenUIAlignEnd';
+        default:
+            return 'OpenUIAlignStretch';
+    }
+}
+function getJustifyClass(justify) {
+    switch (justify) {
+        case 'center':
+            return 'OpenUIJustifyCenter';
+        case 'end':
+            return 'OpenUIJustifyEnd';
+        case 'between':
+            return 'OpenUIJustifyBetween';
+        default:
+            return 'OpenUIJustifyStart';
+    }
+}
+export const Card = defineComponent({
+    name: 'Card',
+    props: z.object({
+        children: z.array(z.any()),
+        variant: z.enum(['card', 'sunk', 'clear']).optional(),
+        direction: z.enum(['row', 'column']).optional(),
+        wrap: z.boolean().optional(),
+        gap: z.enum(['none', 'xs', 's', 'm', 'l', 'xl']).optional(),
+        align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+        justify: z.enum(['start', 'center', 'end', 'between']).optional(),
+    }),
+    description: 'Styled container (card/sunk/clear). Accept Stack layout parameters.',
+    component: ({ props, renderNode }) => {
+        const variant = props.variant ?? 'card';
+        let variantClass = 'OpenUICardVariantCard';
+        if (variant === 'sunk') {
+            variantClass = 'OpenUICardVariantSunk';
+        }
+        else if (variant === 'clear') {
+            variantClass = 'OpenUICardVariantClear';
+        }
+        const direction = props.direction ?? 'column';
+        const gap = props.gap ?? 'm';
+        const align = props.align ?? 'stretch';
+        const justify = props.justify ?? 'start';
+        const layoutClassName = [
+            direction === 'row' ? 'OpenUIStackRow' : 'OpenUIStackColumn',
+            props.wrap ? 'OpenUIStackWrap' : '',
+            GAP_CLASS[gap] ?? GAP_CLASS['m'],
+            getAlignClass(align),
+            getJustifyClass(justify),
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (_jsx("view", { className: `OpenUICard ${variantClass} ${layoutClassName}`, children: renderNode(asArray(props.children)) }));
+    },
+});
+//# sourceMappingURL=index.js.map

package/openui/dist/catalog/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/Card/index.tsx"],"names":[],"mappings":"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"}

package/openui/dist/catalog/CardHeader/index.d.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod/v4';
+export declare const CardHeader: import("../../core/library.js").DefinedComponent<z.ZodObject<{
+    title: z.ZodString;
+    subtitle: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>>;

package/openui/dist/catalog/CardHeader/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+import { defineComponent } from '../../core/library.js';
+export const CardHeader = defineComponent({
+    name: 'CardHeader',
+    props: z.object({
+        title: z.string(),
+        subtitle: z.string().optional(),
+    }),
+    description: 'Card header with title and optional subtitle.',
+    component: ({ props }) => (_jsxs("view", { className: 'OpenUICardHeader', children: [_jsx("text", { className: 'OpenUICardHeaderTitle', children: props.title }), props.subtitle
+                ? _jsx("text", { className: 'OpenUICardHeaderSubtitle', children: props.subtitle })
+                : null] })),
+});
+//# sourceMappingURL=index.js.map

package/openui/dist/catalog/CardHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/CardHeader/index.tsx"],"names":[],"mappings":";AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC;QACd,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE;QACjB,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;KAChC,CAAC;IACF,WAAW,EAAE,+CAA+C;IAC5D,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACxB,gBAAM,SAAS,EAAC,kBAAkB,aAChC,eAAM,SAAS,EAAC,uBAAuB,YAAE,KAAK,CAAC,KAAK,GAAQ,EAC3D,KAAK,CAAC,QAAQ;gBACb,CAAC,CAAC,eAAM,SAAS,EAAC,0BAA0B,YAAE,KAAK,CAAC,QAAQ,GAAQ;gBACpE,CAAC,CAAC,IAAI,IACH,CACR;CACF,CAAC,CAAC"}

package/openui/dist/catalog/Separator/index.d.ts

@@ -0,0 +1,2 @@
+import { z } from 'zod/v4';
+export declare const Separator: import("../../core/library.js").DefinedComponent<z.ZodObject<{}, z.core.$strip>>;

package/openui/dist/catalog/Separator/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+import { defineComponent } from '../../core/library.js';
+export const Separator = defineComponent({
+    name: 'Separator',
+    props: z.object({}),
+    description: 'Separator',
+    component: () => _jsx("view", { className: 'OpenUISeparator' }),
+});
+//# sourceMappingURL=index.js.map

package/openui/dist/catalog/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/Separator/index.tsx"],"names":[],"mappings":";AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;IACnB,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,GAAG,EAAE,CAAC,eAAM,SAAS,EAAC,iBAAiB,GAAG;CACtD,CAAC,CAAC"}

package/openui/dist/catalog/Stack/index.d.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod/v4';
+export declare const Stack: import("../../core/library.js").DefinedComponent<z.ZodObject<{
+    children: z.ZodArray<z.ZodAny>;
+    direction: z.ZodOptional<z.ZodEnum<{
+        row: "row";
+        column: "column";
+    }>>;
+    wrap: z.ZodOptional<z.ZodBoolean>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        none: "none";
+        xs: "xs";
+        s: "s";
+        m: "m";
+        l: "l";
+        xl: "xl";
+    }>>;
+    align: z.ZodOptional<z.ZodEnum<{
+        start: "start";
+        center: "center";
+        end: "end";
+        stretch: "stretch";
+    }>>;
+    justify: z.ZodOptional<z.ZodEnum<{
+        start: "start";
+        center: "center";
+        end: "end";
+        between: "between";
+    }>>;
+}, z.core.$strip>>;

package/openui/dist/catalog/Stack/index.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+import { defineComponent } from '../../core/library.js';
+import { GAP_CLASS, asArray } from '../utils.js';
+function getAlignClass(align) {
+    switch (align) {
+        case 'start':
+            return 'OpenUIAlignStart';
+        case 'center':
+            return 'OpenUIAlignCenter';
+        case 'end':
+            return 'OpenUIAlignEnd';
+        default:
+            return 'OpenUIAlignStretch';
+    }
+}
+function getJustifyClass(justify) {
+    switch (justify) {
+        case 'center':
+            return 'OpenUIJustifyCenter';
+        case 'end':
+            return 'OpenUIJustifyEnd';
+        case 'between':
+            return 'OpenUIJustifyBetween';
+        default:
+            return 'OpenUIJustifyStart';
+    }
+}
+export const Stack = defineComponent({
+    name: 'Stack',
+    props: z.object({
+        children: z.array(z.any()),
+        direction: z.enum(['row', 'column']).optional(),
+        wrap: z.boolean().optional(),
+        gap: z.enum(['none', 'xs', 's', 'm', 'l', 'xl']).optional(),
+        align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+        justify: z.enum(['start', 'center', 'end', 'between']).optional(),
+    }),
+    description: 'Flex layout container',
+    component: ({ props, renderNode }) => {
+        const direction = props.direction ?? 'column';
+        const gap = props.gap ?? 'm';
+        const align = props.align ?? 'stretch';
+        const justify = props.justify ?? 'start';
+        const className = [
+            'OpenUIStack',
+            direction === 'row' ? 'OpenUIStackRow' : 'OpenUIStackColumn',
+            props.wrap ? 'OpenUIStackWrap' : '',
+            GAP_CLASS[gap] ?? GAP_CLASS['m'],
+            getAlignClass(align),
+            getJustifyClass(justify),
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (_jsx("view", { className: className, children: renderNode(asArray(props.children)) }));
+    },
+});
+//# sourceMappingURL=index.js.map