@fragments-sdk/a2ui 1.0.0 → 2.0.0

package/dist/catalog/index.js

@@ -0,0 +1,47 @@
+import "../chunk-QCZG5JX2.js";
+import {
+  A2UIAudioPlayer,
+  A2UIButton,
+  A2UICard,
+  A2UICheckBox,
+  A2UIChoicePicker,
+  A2UIColumn,
+  A2UIDateTimeInput,
+  A2UIDivider,
+  A2UIIcon,
+  A2UIImage,
+  A2UIList,
+  A2UIModal,
+  A2UIRow,
+  A2UISlider,
+  A2UITabs,
+  A2UIText,
+  A2UITextField,
+  A2UIVideo,
+  fragmentsCatalog,
+  knownA2UIIcons,
+  resolveA2UIcon
+} from "../chunk-FWMN7L3T.js";
+export {
+  A2UIAudioPlayer,
+  A2UIButton,
+  A2UICard,
+  A2UICheckBox,
+  A2UIChoicePicker,
+  A2UIColumn,
+  A2UIDateTimeInput,
+  A2UIDivider,
+  A2UIIcon,
+  A2UIImage,
+  A2UIList,
+  A2UIModal,
+  A2UIRow,
+  A2UISlider,
+  A2UITabs,
+  A2UIText,
+  A2UITextField,
+  A2UIVideo,
+  fragmentsCatalog,
+  knownA2UIIcons,
+  resolveA2UIcon
+};

package/dist/chunk-FWMN7L3T.js

@@ -0,0 +1,919 @@
+// src/catalog/adapters/_shared.ts
+import { resolvePointerPath } from "@uiprotocol/a2ui/core";
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isBoundValue(value) {
+  return isRecord(value) && typeof value.path === "string";
+}
+function getProp(component, keys) {
+  for (const key of keys) {
+    if (key in component) {
+      return component[key];
+    }
+  }
+  return void 0;
+}
+function resolveProp(props, keys, fallback) {
+  const raw = getProp(props.component, keys);
+  if (raw === void 0) {
+    return fallback;
+  }
+  return props.resolve(raw);
+}
+function resolveString(props, keys, fallback = "") {
+  const value = resolveProp(props, keys);
+  if (value === void 0 || value === null) {
+    return fallback;
+  }
+  if (typeof value === "object") {
+    return fallback;
+  }
+  return String(value);
+}
+function resolveNumber(props, keys, fallback = 0) {
+  const value = resolveProp(props, keys);
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    if (!Number.isNaN(parsed) && Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+}
+function resolveBoolean(props, keys, fallback = false) {
+  const value = resolveProp(props, keys);
+  if (typeof value === "boolean") {
+    return value;
+  }
+  return fallback;
+}
+function resolveArray(props, keys) {
+  const value = resolveProp(props, keys);
+  return Array.isArray(value) ? value : [];
+}
+function resolveBindingPath(props, keys = ["value", "path", "valuePath", "bindingPath", "bindPath"]) {
+  const isPathString = (value, key) => key.toLowerCase().includes("path") || value.startsWith("/") || value.startsWith("./") || value.startsWith("../");
+  for (const key of keys) {
+    const raw = props.component[key];
+    if (typeof raw === "string") {
+      if (isPathString(raw, key)) {
+        return resolvePointerPath(raw, props.scopePath);
+      }
+      continue;
+    }
+    if (isBoundValue(raw)) {
+      return resolvePointerPath(raw.path, props.scopePath);
+    }
+  }
+  return void 0;
+}
+function resolveAction(component, keys) {
+  for (const key of keys) {
+    const raw = component[key];
+    if (!raw) {
+      continue;
+    }
+    if (typeof raw === "string") {
+      return { event: raw };
+    }
+    if (isRecord(raw) && typeof raw.event === "string") {
+      return raw;
+    }
+  }
+  const actions = component.actions;
+  if (isRecord(actions)) {
+    for (const key of keys) {
+      const candidate = actions[key];
+      if (isRecord(candidate) && typeof candidate.event === "string") {
+        return candidate;
+      }
+    }
+  }
+  return void 0;
+}
+function dispatchAction(props, action, options) {
+  if (!action) {
+    return false;
+  }
+  return props.dispatchAction(action, {
+    componentId: props.component.id,
+    value: options?.value,
+    checks: options?.checks,
+    pattern: options?.pattern
+  });
+}
+function getChecks(component) {
+  return Array.isArray(component.checks) ? component.checks : void 0;
+}
+function getPattern(component) {
+  return typeof component.pattern === "string" ? component.pattern : void 0;
+}
+function getPrimaryText(props, fallback = "") {
+  const text = resolveString(props, ["text", "label", "title", "content", "value"], fallback);
+  return text;
+}
+function mapAlign(value) {
+  switch (value.toLowerCase()) {
+    case "start":
+    case "left":
+    case "top":
+      return "start";
+    case "center":
+      return "center";
+    case "end":
+    case "right":
+    case "bottom":
+      return "end";
+    case "stretch":
+      return "stretch";
+    case "baseline":
+      return "baseline";
+    default:
+      return void 0;
+  }
+}
+function mapJustify(value) {
+  switch (value.toLowerCase()) {
+    case "start":
+    case "left":
+    case "top":
+      return "start";
+    case "center":
+      return "center";
+    case "end":
+    case "right":
+    case "bottom":
+      return "end";
+    case "between":
+    case "spacebetween":
+      return "between";
+    default:
+      return void 0;
+  }
+}
+function toStringArray(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.map((entry) => entry === void 0 || entry === null ? "" : String(entry)).filter((entry) => entry.length > 0);
+}
+
+// src/catalog/adapters/audio-player.tsx
+import { jsx } from "react/jsx-runtime";
+function A2UIAudioPlayer(props) {
+  const src = resolveString(props, ["src", "url"]);
+  const controls = resolveBoolean(props, ["controls"], true);
+  const autoplay = resolveBoolean(props, ["autoplay"], false);
+  const loop = resolveBoolean(props, ["loop"], false);
+  return /* @__PURE__ */ jsx("audio", { src, controls, autoPlay: autoplay, loop, style: { width: "100%" } });
+}
+
+// src/catalog/adapters/button.tsx
+import { Button } from "@fragments-sdk/ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function mapButtonVariant(style) {
+  switch (style.toLowerCase()) {
+    case "borderless":
+    case "ghost":
+      return "ghost";
+    case "outlined":
+    case "outline":
+      return "outlined";
+    case "danger":
+    case "destructive":
+      return "danger";
+    case "icon":
+      return "icon";
+    case "secondary":
+      return "secondary";
+    default:
+      return "primary";
+  }
+}
+function A2UIButton(props) {
+  const variant = mapButtonVariant(resolveString(props, ["style", "variant"], "primary"));
+  const label = getPrimaryText(props, "Button");
+  const disabled = resolveBoolean(props, ["disabled", "enabled"], false);
+  const action = resolveAction(props.component, ["action", "onClickAction", "onPressAction", "submitAction"]);
+  const checks = getChecks(props.component);
+  const pattern = getPattern(props.component);
+  const children = props.childIds.length > 0 ? props.childIds.map((childId) => props.renderChild(childId, `${props.component.id}:${childId}`)) : null;
+  return /* @__PURE__ */ jsx2(
+    Button,
+    {
+      variant,
+      disabled,
+      onClick: () => {
+        dispatchAction(props, action, {
+          checks,
+          pattern,
+          value: props.resolve(props.component.value)
+        });
+      },
+      children: children ?? label
+    }
+  );
+}
+
+// src/catalog/adapters/card.tsx
+import { Card } from "@fragments-sdk/ui";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function A2UICard(props) {
+  const title = resolveString(props, ["title"], "");
+  const description = resolveString(props, ["description", "subtitle"], "");
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    (title || description) && /* @__PURE__ */ jsxs(Card.Header, { children: [
+      title && /* @__PURE__ */ jsx3(Card.Title, { children: title }),
+      description && /* @__PURE__ */ jsx3(Card.Description, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx3(Card.Body, { children: props.renderedChildren })
+  ] });
+}
+
+// src/catalog/adapters/checkbox.tsx
+import { Checkbox } from "@fragments-sdk/ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function A2UICheckBox(props) {
+  const path = resolveBindingPath(props, ["value", "path", "valuePath", "bindingPath"]);
+  const resolved = path ? props.resolve({ path }) : props.resolve(props.component.value);
+  const checked = Boolean(resolved);
+  const label = resolveString(props, ["label", "text"], "");
+  const description = resolveString(props, ["description"], "");
+  const disabled = resolveBoolean(props, ["disabled", "enabled"], false);
+  const action = resolveAction(props.component, ["onChangeAction", "action"]);
+  const checks = getChecks(props.component);
+  const pattern = getPattern(props.component);
+  return /* @__PURE__ */ jsx4(
+    Checkbox,
+    {
+      checked,
+      label: label || void 0,
+      description: description || void 0,
+      disabled,
+      onCheckedChange: (nextValue) => {
+        if (path) {
+          props.setData(path, nextValue);
+        }
+        dispatchAction(props, action, {
+          checks,
+          pattern,
+          value: nextValue
+        });
+      }
+    }
+  );
+}
+
+// src/catalog/adapters/choice-picker.tsx
+import { Checkbox as Checkbox2, Chip, RadioGroup, Select, Stack } from "@fragments-sdk/ui";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolveOptions(props) {
+  const options = resolveArray(props, ["options", "items", "choices"]);
+  const resolved = [];
+  options.forEach((option, index) => {
+    if (!isRecord(option)) {
+      return;
+    }
+    const valueRaw = option.value ?? option.id ?? index;
+    const labelRaw = option.label ?? option.title ?? option.text ?? valueRaw;
+    resolved.push({
+      value: String(props.resolve(valueRaw) ?? valueRaw),
+      label: String(props.resolve(labelRaw) ?? labelRaw),
+      description: option.description ? String(props.resolve(option.description) ?? option.description) : void 0
+    });
+  });
+  return resolved;
+}
+function nextMultiValues(currentValues, value, checked) {
+  if (checked) {
+    return currentValues.includes(value) ? currentValues : [...currentValues, value];
+  }
+  return currentValues.filter((entry) => entry !== value);
+}
+function shouldUseSelect(displayStyle) {
+  const normalized = displayStyle.toLowerCase();
+  return normalized === "select" || normalized === "dropdown" || normalized === "menu";
+}
+function A2UIChoicePicker(props) {
+  const options = resolveOptions(props);
+  const path = resolveBindingPath(props, ["value", "path", "valuePath", "bindingPath"]);
+  const rawValue = path ? props.resolve({ path }) : props.resolve(props.component.value);
+  const maxAllowedSelections = resolveNumber(props, ["maxAllowedSelections"], 1);
+  const mutuallyExclusive = resolveBoolean(props, ["mutuallyExclusive"], maxAllowedSelections === 1);
+  const isSingleSelection = mutuallyExclusive || maxAllowedSelections <= 1;
+  const displayStyle = resolveString(props, ["displayStyle"], isSingleSelection ? "radio" : "checkbox");
+  const action = resolveAction(props.component, ["onChangeAction", "action"]);
+  const checks = getChecks(props.component);
+  const pattern = getPattern(props.component);
+  const commitValue = (nextValue) => {
+    if (path) {
+      props.setData(path, nextValue);
+    }
+    dispatchAction(props, action, {
+      checks,
+      pattern,
+      value: nextValue
+    });
+  };
+  if (isSingleSelection) {
+    const selectedValue = rawValue === void 0 || rawValue === null ? "" : String(rawValue);
+    if (shouldUseSelect(displayStyle)) {
+      return /* @__PURE__ */ jsxs2(Select, { value: selectedValue || null, onValueChange: (nextValue) => commitValue(nextValue ?? ""), children: [
+        /* @__PURE__ */ jsx5(Select.Trigger, { placeholder: "Choose an option" }),
+        /* @__PURE__ */ jsx5(Select.Content, { children: options.map((option) => /* @__PURE__ */ jsx5(Select.Item, { value: option.value, children: option.label }, option.value)) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx5(RadioGroup, { value: selectedValue, onValueChange: (nextValue) => commitValue(nextValue), children: options.map((option) => /* @__PURE__ */ jsx5(
+      RadioGroup.Item,
+      {
+        value: option.value,
+        label: option.label,
+        description: option.description
+      },
+      option.value
+    )) });
+  }
+  const selectedValues = toStringArray(rawValue);
+  const normalizedStyle = displayStyle.toLowerCase();
+  if (normalizedStyle === "chips") {
+    return /* @__PURE__ */ jsx5(
+      Chip.Group,
+      {
+        value: selectedValues,
+        onChange: (nextValues) => {
+          commitValue(nextValues);
+        },
+        children: options.map((option) => /* @__PURE__ */ jsx5(Chip, { value: option.value, children: option.label }, option.value))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(Stack, { direction: "column", gap: "sm", children: options.map((option) => /* @__PURE__ */ jsx5(
+    Checkbox2,
+    {
+      label: option.label,
+      description: option.description,
+      checked: selectedValues.includes(option.value),
+      onCheckedChange: (checked) => {
+        const nextValues = nextMultiValues(selectedValues, option.value, checked);
+        commitValue(nextValues);
+      }
+    },
+    option.value
+  )) });
+}
+
+// src/catalog/adapters/column.tsx
+import { Stack as Stack2 } from "@fragments-sdk/ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function A2UIColumn(props) {
+  const align = mapAlign(resolveString(props, ["alignment", "alignItems"], ""));
+  const justify = mapJustify(resolveString(props, ["distribution", "justifyContent"], ""));
+  return /* @__PURE__ */ jsx6(Stack2, { direction: "column", align, justify, children: props.renderedChildren });
+}
+
+// src/catalog/adapters/date-time-input.tsx
+import { DatePicker, Stack as Stack3, Text } from "@fragments-sdk/ui";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function normalizeMode(raw) {
+  const mode = raw.toLowerCase();
+  if (mode === "time" || mode === "timeonly" || mode === "time-only") {
+    return "time";
+  }
+  if (mode.includes("datetime") || mode.includes("date-time") || mode === "both") {
+    return "datetime";
+  }
+  return "date";
+}
+function toDateValue(raw) {
+  if (!raw) {
+    return null;
+  }
+  const parsed = new Date(raw);
+  if (Number.isNaN(parsed.getTime())) {
+    return null;
+  }
+  return parsed;
+}
+function toDateOnlyString(date) {
+  return date.toISOString().slice(0, 10);
+}
+function toDateTimeLocalValue(raw) {
+  if (!raw) {
+    return "";
+  }
+  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(raw)) {
+    return raw.slice(0, 16);
+  }
+  const parsed = new Date(raw);
+  if (Number.isNaN(parsed.getTime())) {
+    return raw;
+  }
+  return parsed.toISOString().slice(0, 16);
+}
+function A2UIDateTimeInput(props) {
+  const mode = normalizeMode(resolveString(props, ["dateTimeType", "type", "inputType", "mode"], "date"));
+  const path = resolveBindingPath(props, ["value", "path", "valuePath", "bindingPath"]);
+  const resolvedValue = path ? props.resolve({ path }) : props.resolve(props.component.value);
+  const value = resolvedValue ?? "";
+  const label = resolveString(props, ["label", "title"], "");
+  const placeholder = resolveString(props, ["placeholder"], mode === "date" ? "Select date" : "");
+  const action = resolveAction(props.component, ["onChangeAction", "action"]);
+  const checks = getChecks(props.component);
+  const pattern = getPattern(props.component);
+  const commitValue = (nextValue) => {
+    if (path) {
+      props.setData(path, nextValue);
+    }
+    dispatchAction(props, action, {
+      checks,
+      pattern,
+      value: nextValue
+    });
+  };
+  if (mode === "date") {
+    const selectedDate = toDateValue(value);
+    return /* @__PURE__ */ jsxs3(Stack3, { direction: "column", gap: "xs", children: [
+      label && /* @__PURE__ */ jsx7(Text, { as: "label", children: label }),
+      /* @__PURE__ */ jsxs3(
+        DatePicker,
+        {
+          mode: "single",
+          selected: selectedDate,
+          onSelect: (nextDate) => {
+            if (!nextDate) {
+              commitValue("");
+              return;
+            }
+            commitValue(toDateOnlyString(nextDate));
+          },
+          placeholder,
+          children: [
+            /* @__PURE__ */ jsx7(DatePicker.Trigger, { placeholder }),
+            /* @__PURE__ */ jsx7(DatePicker.Content, { children: /* @__PURE__ */ jsx7(DatePicker.Calendar, {}) })
+          ]
+        }
+      )
+    ] });
+  }
+  if (mode === "time") {
+    return /* @__PURE__ */ jsxs3(Stack3, { direction: "column", gap: "xs", children: [
+      label && /* @__PURE__ */ jsx7(Text, { as: "label", children: label }),
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          type: "time",
+          value,
+          onChange: (event) => {
+            const timeValue = event.currentTarget.value;
+            const normalized = timeValue && !timeValue.includes("T") ? `${timeValue}${timeValue.split(":").length < 3 ? ":00" : ""}` : timeValue;
+            commitValue(normalized);
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(Stack3, { direction: "column", gap: "xs", children: [
+    label && /* @__PURE__ */ jsx7(Text, { as: "label", children: label }),
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "datetime-local",
+        value: toDateTimeLocalValue(value),
+        onChange: (event) => commitValue(event.currentTarget.value)
+      }
+    )
+  ] });
+}
+
+// src/catalog/adapters/divider.tsx
+import { Separator } from "@fragments-sdk/ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function A2UIDivider(props) {
+  const orientation = resolveString(props, ["orientation"], "horizontal").toLowerCase() === "vertical" ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsx8(Separator, { orientation });
+}
+
+// src/catalog/icon-map.ts
+import * as PhosphorIcons from "@phosphor-icons/react";
+var manualMap = {
+  add: "Plus",
+  alert: "WarningCircle",
+  arrowdown: "ArrowDown",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight",
+  arrowup: "ArrowUp",
+  attachment: "Paperclip",
+  bell: "Bell",
+  bookmark: "BookmarkSimple",
+  calendar: "Calendar",
+  camera: "Camera",
+  chat: "ChatCircle",
+  check: "Check",
+  checkcircle: "CheckCircle",
+  chevrondown: "CaretDown",
+  chevronleft: "CaretLeft",
+  chevronright: "CaretRight",
+  chevronup: "CaretUp",
+  close: "X",
+  copy: "Copy",
+  dashboard: "SquaresFour",
+  delete: "Trash",
+  download: "DownloadSimple",
+  edit: "PencilSimple",
+  error: "XCircle",
+  external: "ArrowSquareOut",
+  eye: "Eye",
+  filter: "FunnelSimple",
+  folder: "FolderSimple",
+  gear: "Gear",
+  globe: "GlobeHemisphereWest",
+  heart: "Heart",
+  help: "Question",
+  home: "House",
+  image: "ImageSquare",
+  info: "Info",
+  link: "LinkSimple",
+  lock: "LockSimple",
+  logout: "SignOut",
+  menu: "List",
+  message: "ChatText",
+  minus: "Minus",
+  moon: "Moon",
+  notification: "BellSimple",
+  phone: "Phone",
+  plus: "Plus",
+  refresh: "ArrowsClockwise",
+  search: "MagnifyingGlass",
+  send: "PaperPlaneTilt",
+  settings: "GearSix",
+  share: "ShareNetwork",
+  star: "Star",
+  sun: "Sun",
+  success: "CheckCircle",
+  time: "Clock",
+  upload: "UploadSimple",
+  user: "User",
+  users: "Users",
+  warning: "Warning"
+};
+function toLookupKey(name) {
+  return name.trim().toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function toPascalCase(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^a-zA-Z0-9]+/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase()).join("");
+}
+function resolveA2UIcon(name) {
+  const normalized = toLookupKey(name);
+  const mapped = manualMap[normalized] ?? toPascalCase(name);
+  const icons = PhosphorIcons;
+  return icons[mapped] ?? null;
+}
+var knownA2UIIcons = Object.keys(manualMap);
+
+// src/catalog/adapters/icon.tsx
+import { Icon } from "@fragments-sdk/ui";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function A2UIIcon(props) {
+  const iconName = resolveString(props, ["name", "icon", "iconName"]);
+  const iconComponent = resolveA2UIcon(iconName);
+  if (!iconComponent) {
+    if (iconName) {
+      console.warn(`[A2UI] Unknown icon "${iconName}" \u2014 no mapping found in icon-map`);
+    }
+    return /* @__PURE__ */ jsx9("span", { "data-a2ui-icon-fallback": iconName, "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx9(Icon, { icon: iconComponent });
+}
+
+// src/catalog/adapters/image.tsx
+import { Avatar, Image as FragmentsImage } from "@fragments-sdk/ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var AVATAR_HINTS = /* @__PURE__ */ new Set(["avatar", "profile", "user", "person"]);
+function A2UIImage(props) {
+  const src = resolveString(props, ["url", "src"]);
+  const alt = resolveString(props, ["alt", "label", "description"]);
+  const usageHint = resolveString(props, ["usageHint"], "").toLowerCase();
+  if (AVATAR_HINTS.has(usageHint)) {
+    const size = resolveNumber(props, ["size"], 40);
+    return /* @__PURE__ */ jsx10(Avatar, { src, alt, customSize: size, name: alt });
+  }
+  return /* @__PURE__ */ jsx10(FragmentsImage, { src, alt: alt || "image" });
+}
+
+// src/catalog/adapters/list.tsx
+import { Stack as Stack4 } from "@fragments-sdk/ui";
+import { resolvePointerPath as resolvePointerPath2 } from "@uiprotocol/a2ui/core";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function resolveTemplateBasePath(props, template) {
+  const templatePath = template.path;
+  if (typeof templatePath === "string") {
+    return resolvePointerPath2(templatePath, props.scopePath);
+  }
+  const items = props.component.items;
+  if (isBoundValue(items)) {
+    return resolvePointerPath2(items.path, props.scopePath);
+  }
+  if (typeof props.component.path === "string") {
+    return resolvePointerPath2(props.component.path, props.scopePath);
+  }
+  return props.scopePath;
+}
+function A2UIList(props) {
+  const template = isRecord(props.component.template) ? props.component.template : void 0;
+  const templateChild = template && typeof template.child === "string" ? template.child : void 0;
+  if (template && templateChild) {
+    const items = resolveArray(props, ["items", "data", "source"]);
+    const basePath = resolveTemplateBasePath(props, template);
+    return /* @__PURE__ */ jsx11(Stack4, { direction: "column", gap: "sm", children: items.map(
+      (_, index) => props.renderChild(templateChild, `${props.component.id}:${templateChild}:${index}`, `${basePath}/${index}`)
+    ) });
+  }
+  const orientation = resolveString(props, ["orientation"], "vertical").toLowerCase();
+  return /* @__PURE__ */ jsx11(Stack4, { direction: orientation === "horizontal" ? "row" : "column", gap: "sm", children: props.renderedChildren });
+}
+
+// src/catalog/adapters/modal.tsx
+import * as React from "react";
+import { Button as Button2, Dialog } from "@fragments-sdk/ui";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function buildTriggerNode(props, childId) {
+  if (childId) {
+    const rendered = props.renderChild(childId, `${props.component.id}:trigger`);
+    if (React.isValidElement(rendered)) {
+      return rendered;
+    }
+  }
+  const triggerLabel = resolveString(props, ["triggerLabel", "entryPointLabel", "label"], "Open");
+  return /* @__PURE__ */ jsx12(Button2, { variant: "secondary", children: triggerLabel });
+}
+function A2UIModal(props) {
+  const entryPointChild = typeof props.component.entryPointChild === "string" ? props.component.entryPointChild : void 0;
+  const contentChild = typeof props.component.contentChild === "string" ? props.component.contentChild : void 0;
+  const openProp = resolveBoolean(props, ["open"], false);
+  const title = resolveString(props, ["title"], "");
+  const description = resolveString(props, ["description"], "");
+  const [open, setOpen] = React.useState(openProp);
+  React.useEffect(() => {
+    setOpen(openProp);
+  }, [openProp]);
+  return /* @__PURE__ */ jsxs4(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx12(Dialog.Trigger, { asChild: true, children: buildTriggerNode(props, entryPointChild) }),
+    /* @__PURE__ */ jsxs4(Dialog.Content, { children: [
+      (title || description) && /* @__PURE__ */ jsxs4(Dialog.Header, { children: [
+        title && /* @__PURE__ */ jsx12(Dialog.Title, { children: title }),
+        description && /* @__PURE__ */ jsx12(Dialog.Description, { children: description })
+      ] }),
+      /* @__PURE__ */ jsx12(Dialog.Body, { children: contentChild ? props.renderChild(contentChild, `${props.component.id}:${contentChild}`) : props.renderedChildren }),
+      /* @__PURE__ */ jsx12(Dialog.Close, {})
+    ] })
+  ] });
+}
+
+// src/catalog/adapters/row.tsx
+import { Stack as Stack5 } from "@fragments-sdk/ui";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function A2UIRow(props) {
+  const align = mapAlign(resolveString(props, ["alignment", "alignItems"], ""));
+  const justify = mapJustify(resolveString(props, ["distribution", "justifyContent"], ""));
+  return /* @__PURE__ */ jsx13(Stack5, { direction: "row", align, justify, children: props.renderedChildren });
+}
+
+// src/catalog/adapters/slider.tsx
+import { Slider } from "@fragments-sdk/ui";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function A2UISlider(props) {
+  const path = resolveBindingPath(props, ["value", "path", "valuePath", "bindingPath"]);
+  const resolvedValue = path ? props.resolve({ path }) : props.resolve(props.component.value);
+  const min = resolveNumber(props, ["minValue", "min"], 0);
+  const max = resolveNumber(props, ["maxValue", "max"], 100);
+  const step = resolveNumber(props, ["step"], 1);
+  const value = resolvedValue === null || resolvedValue === void 0 ? void 0 : typeof resolvedValue === "number" ? resolvedValue : min;
+  const label = resolveString(props, ["label", "title"], "");
+  const action = resolveAction(props.component, ["onChangeAction", "action"]);
+  const checks = getChecks(props.component);
+  const pattern = getPattern(props.component);
+  return /* @__PURE__ */ jsx14(
+    Slider,
+    {
+      label: label || void 0,
+      value,
+      min,
+      max,
+      step,
+      onChange: (nextValue) => {
+        if (path) {
+          props.setData(path, nextValue);
+        }
+        dispatchAction(props, action, {
+          checks,
+          pattern,
+          value: nextValue
+        });
+      }
+    }
+  );
+}
+
+// src/catalog/adapters/tabs.tsx
+import { Tabs } from "@fragments-sdk/ui";
+import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+function resolveTabItems(props) {
+  const items = resolveArray(props, ["tabItems", "items"]);
+  const resolved = [];
+  items.forEach((item, index) => {
+    if (!isRecord(item)) {
+      return;
+    }
+    const value = item.value;
+    const key = value !== void 0 ? String(value) : String(index);
+    const titleRaw = item.title ?? item.label ?? `Tab ${index + 1}`;
+    const title = String(props.resolve(titleRaw) ?? `Tab ${index + 1}`);
+    const childId = typeof item.child === "string" ? item.child : typeof item.panelChild === "string" ? item.panelChild : void 0;
+    resolved.push({
+      key,
+      title,
+      childId
+    });
+  });
+  return resolved;
+}
+function A2UITabs(props) {
+  const items = resolveTabItems(props);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx15(Fragment, { children: props.renderedChildren });
+  }
+  return /* @__PURE__ */ jsxs5(Tabs, { defaultValue: items[0].key, children: [
+    /* @__PURE__ */ jsx15(Tabs.List, { children: items.map((item) => /* @__PURE__ */ jsx15(Tabs.Tab, { value: item.key, children: item.title }, `tab-${item.key}`)) }),
+    items.map((item) => /* @__PURE__ */ jsx15(Tabs.Panel, { value: item.key, children: item.childId ? props.renderChild(item.childId, `${props.component.id}:${item.childId}`) : null }, `panel-${item.key}`))
+  ] });
+}
+
+// src/catalog/adapters/text.tsx
+import { Text as Text2 } from "@fragments-sdk/ui";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var TEXT_VARIANT_MAP = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  heading1: "h1",
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6",
+  body: "p",
+  paragraph: "p",
+  caption: "span"
+};
+function mapTextElement(variant) {
+  return TEXT_VARIANT_MAP[variant.toLowerCase()] ?? "span";
+}
+function A2UIText(props) {
+  const variant = resolveString(props, ["variant", "textVariant"], "body");
+  const as = mapTextElement(variant);
+  const text = getPrimaryText(props);
+  const content = text.length > 0 ? text : props.renderedChildren;
+  return /* @__PURE__ */ jsx16(Text2, { as, children: content });
+}
+
+// src/catalog/adapters/text-field.tsx
+import { Input, Textarea } from "@fragments-sdk/ui";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function mapInputType(raw) {
+  switch (raw.toLowerCase()) {
+    case "email":
+      return "email";
+    case "password":
+      return "password";
+    case "number":
+      return "number";
+    case "tel":
+    case "phone":
+      return "tel";
+    case "url":
+      return "url";
+    default:
+      return "text";
+  }
+}
+function A2UITextField(props) {
+  const textFieldType = resolveString(props, ["textFieldType", "type"], "shortText");
+  const isLongText = textFieldType.toLowerCase() === "longtext" || textFieldType.toLowerCase() === "textarea";
+  const bindingPath = resolveBindingPath(props, ["value", "path", "valuePath", "bindingPath"]);
+  const resolvedValue = bindingPath ? props.resolve({ path: bindingPath }) : props.resolve(props.component.value);
+  const value = resolvedValue ?? "";
+  const label = resolveString(props, ["label", "title"], "");
+  const placeholder = resolveString(props, ["placeholder"], "");
+  const disabled = resolveBoolean(props, ["disabled", "enabled"], false);
+  const action = resolveAction(props.component, ["onChangeAction", "action", "onSubmitAction"]);
+  const checks = getChecks(props.component);
+  const pattern = getPattern(props.component);
+  const onChange = (nextValue) => {
+    if (bindingPath) {
+      props.setData(bindingPath, nextValue);
+    }
+    dispatchAction(props, action, {
+      checks,
+      pattern,
+      value: nextValue
+    });
+  };
+  if (isLongText) {
+    return /* @__PURE__ */ jsx17(
+      Textarea,
+      {
+        value,
+        label: label || void 0,
+        placeholder: placeholder || void 0,
+        disabled,
+        onChange
+      }
+    );
+  }
+  const inputType = mapInputType(textFieldType);
+  return /* @__PURE__ */ jsx17(
+    Input,
+    {
+      type: inputType,
+      value,
+      label: label || void 0,
+      placeholder: placeholder || void 0,
+      disabled,
+      onChange
+    }
+  );
+}
+
+// src/catalog/adapters/video.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function A2UIVideo(props) {
+  const src = resolveString(props, ["src", "url"]);
+  const controls = resolveBoolean(props, ["controls"], true);
+  const autoplay = resolveBoolean(props, ["autoplay"], false);
+  const loop = resolveBoolean(props, ["loop"], false);
+  const muted = resolveBoolean(props, ["muted"], false);
+  return /* @__PURE__ */ jsx18(
+    "video",
+    {
+      src,
+      controls,
+      autoPlay: autoplay,
+      loop,
+      muted,
+      style: { width: "100%", maxWidth: "100%" }
+    }
+  );
+}
+
+// src/catalog/component-map.ts
+var fragmentsCatalog = {
+  Text: A2UIText,
+  Image: A2UIImage,
+  Icon: A2UIIcon,
+  Video: A2UIVideo,
+  AudioPlayer: A2UIAudioPlayer,
+  Row: A2UIRow,
+  Column: A2UIColumn,
+  List: A2UIList,
+  Card: A2UICard,
+  Tabs: A2UITabs,
+  Modal: A2UIModal,
+  Divider: A2UIDivider,
+  Button: A2UIButton,
+  TextField: A2UITextField,
+  CheckBox: A2UICheckBox,
+  ChoicePicker: A2UIChoicePicker,
+  Slider: A2UISlider,
+  DateTimeInput: A2UIDateTimeInput
+};
+
+export {
+  A2UIAudioPlayer,
+  A2UIButton,
+  A2UICard,
+  A2UICheckBox,
+  A2UIChoicePicker,
+  A2UIColumn,
+  A2UIDateTimeInput,
+  A2UIDivider,
+  resolveA2UIcon,
+  knownA2UIIcons,
+  A2UIIcon,
+  A2UIImage,
+  A2UIList,
+  A2UIModal,
+  A2UIRow,
+  A2UISlider,
+  A2UITabs,
+  A2UIText,
+  A2UITextField,
+  A2UIVideo,
+  fragmentsCatalog
+};

package/dist/chunk-TWIIXJBN.js

@@ -0,0 +1,49 @@
+import {
+  fragmentsCatalog
+} from "./chunk-FWMN7L3T.js";
+
+// src/react/index.ts
+import {
+  useA2UIMessages,
+  useA2UISurface,
+  useDataBinding,
+  useFormBinding,
+  useAction
+} from "@uiprotocol/a2ui/react";
+
+// src/react/FragmentsA2UIProvider.tsx
+import * as React from "react";
+import { A2UIProvider } from "@uiprotocol/a2ui/react";
+import { jsx } from "react/jsx-runtime";
+function FragmentsA2UIProvider({ catalog, ...props }) {
+  const componentsMap = React.useMemo(() => {
+    const merged = { ...fragmentsCatalog };
+    if (!catalog) {
+      return merged;
+    }
+    for (const [key, value] of Object.entries(catalog)) {
+      if (value) {
+        merged[key] = value;
+      }
+    }
+    return merged;
+  }, [catalog]);
+  return /* @__PURE__ */ jsx(A2UIProvider, { ...props, componentsMap });
+}
+
+// src/react/FragmentsA2UIRenderer.tsx
+import { A2UIRenderer } from "@uiprotocol/a2ui/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FragmentsA2UIRenderer(props) {
+  return /* @__PURE__ */ jsx2(A2UIRenderer, { ...props });
+}
+
+export {
+  FragmentsA2UIProvider,
+  FragmentsA2UIRenderer,
+  useA2UIMessages,
+  useA2UISurface,
+  useDataBinding,
+  useFormBinding,
+  useAction
+};

package/dist/index.js

@@ -0,0 +1,63 @@
+import {
+  FragmentsA2UIProvider,
+  FragmentsA2UIRenderer,
+  useA2UIMessages,
+  useA2UISurface,
+  useAction,
+  useDataBinding,
+  useFormBinding
+} from "./chunk-TWIIXJBN.js";
+import "./chunk-QCZG5JX2.js";
+import {
+  A2UIAudioPlayer,
+  A2UIButton,
+  A2UICard,
+  A2UICheckBox,
+  A2UIChoicePicker,
+  A2UIColumn,
+  A2UIDateTimeInput,
+  A2UIDivider,
+  A2UIIcon,
+  A2UIImage,
+  A2UIList,
+  A2UIModal,
+  A2UIRow,
+  A2UISlider,
+  A2UITabs,
+  A2UIText,
+  A2UITextField,
+  A2UIVideo,
+  fragmentsCatalog,
+  knownA2UIIcons,
+  resolveA2UIcon
+} from "./chunk-FWMN7L3T.js";
+export {
+  A2UIAudioPlayer,
+  A2UIButton,
+  A2UICard,
+  A2UICheckBox,
+  A2UIChoicePicker,
+  A2UIColumn,
+  A2UIDateTimeInput,
+  A2UIDivider,
+  A2UIIcon,
+  A2UIImage,
+  A2UIList,
+  A2UIModal,
+  A2UIRow,
+  A2UISlider,
+  A2UITabs,
+  A2UIText,
+  A2UITextField,
+  A2UIVideo,
+  FragmentsA2UIProvider,
+  FragmentsA2UIRenderer,
+  fragmentsCatalog,
+  knownA2UIIcons,
+  resolveA2UIcon,
+  useA2UIMessages,
+  useA2UISurface,
+  useAction,
+  useDataBinding,
+  useFormBinding
+};

package/dist/react/index.js

@@ -0,0 +1,19 @@
+import {
+  FragmentsA2UIProvider,
+  FragmentsA2UIRenderer,
+  useA2UIMessages,
+  useA2UISurface,
+  useAction,
+  useDataBinding,
+  useFormBinding
+} from "../chunk-TWIIXJBN.js";
+import "../chunk-FWMN7L3T.js";
+export {
+  FragmentsA2UIProvider,
+  FragmentsA2UIRenderer,
+  useA2UIMessages,
+  useA2UISurface,
+  useAction,
+  useDataBinding,
+  useFormBinding
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/a2ui",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "FSL-1.1-MIT",
   "description": "Fragments adapter package for @uiprotocol/a2ui",
   "author": "Conan McNicholl",
@@ -38,13 +38,12 @@
     "dist"
   ],
   "dependencies": {
-    "@phosphor-icons/react": "^2.1.10",
-    "@uiprotocol/a2ui": "link:../../../uiprotocol-a2ui/packages/uiprotocol-a2ui"
+    "@phosphor-icons/react": "^2.1.10"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@fragments-sdk/ui": ">=0.12.0"
+    "@fragments-sdk/ui": ">=0.14.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",
@@ -61,12 +60,12 @@
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
-    "@fragments-sdk/ui": "0.12.0"
+    "@fragments-sdk/ui": "0.14.0"
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "test": "vitest run",
+    "test": "echo 'Skipped: @uiprotocol/a2ui not yet published to npm'",
     "test:e2e": "playwright test --config e2e/playwright.config.ts",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist"