machinalayout 0.1.0 → 0.3.0

package/dist/inspect/index.d.ts

@@ -0,0 +1,8 @@
+import { S as SummarizeMachinaDomOptions, M as MachinaDomSummary } from '../types-DLYAhNXw.js';
+export { a as MachinaDomSummaryNode } from '../types-DLYAhNXw.js';
+import '../types-B90jb3RW.js';
+
+type DomRoot = ParentNode | Element | Document;
+declare function summarizeMachinaDom(rootOrOptions?: DomRoot | SummarizeMachinaDomOptions): MachinaDomSummary;
+
+export { MachinaDomSummary, SummarizeMachinaDomOptions, summarizeMachinaDom };

package/dist/inspect/index.js

@@ -0,0 +1,97 @@
+// src/inspect/summarizeMachinaDom.ts
+var DEFAULT_SELECTOR = "[data-machina-node-id]";
+var DEFAULT_MAX_TEXT_LENGTH = 120;
+function getGlobalDocument() {
+  return typeof document === "undefined" ? void 0 : document;
+}
+function isOptions(value) {
+  if (value === void 0 || value === null || typeof value !== "object") return false;
+  return "root" in value || "selector" in value || "includeTextExcerpt" in value || "includeA11y" in value || "generatedAt" in value || "maxTextLength" in value || "includeEmptyNodes" in value;
+}
+function readOptionalAttribute(element, name) {
+  const value = element.getAttribute(name);
+  return value === null || value === "" ? void 0 : value;
+}
+function rectFromElement(element) {
+  const rect = element.getBoundingClientRect();
+  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+}
+function textExcerpt(element, maxLength) {
+  const normalized = (element.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (normalized === "") return void 0;
+  return normalized.length > maxLength ? normalized.slice(0, maxLength) : normalized;
+}
+function canMatchRoot(root) {
+  return typeof root.matches === "function";
+}
+function queryMatchingElements(root, selector) {
+  const matches = Array.from(root.querySelectorAll(selector));
+  if (canMatchRoot(root) && root.matches(selector)) return [root, ...matches];
+  return matches;
+}
+function nearestMatchingAncestor(element, selected, root) {
+  let parent = element.parentElement;
+  while (parent) {
+    if (selected.has(parent)) return parent;
+    if (parent === root) return void 0;
+    parent = parent.parentElement;
+  }
+  return void 0;
+}
+function makeSummaryNode(element, options) {
+  const node = {
+    tagName: element.tagName.toLowerCase(),
+    rect: rectFromElement(element),
+    children: []
+  };
+  const nodeId = readOptionalAttribute(element, "data-machina-node-id");
+  const view = readOptionalAttribute(element, "data-machina-view");
+  const slot = readOptionalAttribute(element, "data-machina-slot");
+  const debugLabel = readOptionalAttribute(element, "data-machina-debug-label");
+  const layer = readOptionalAttribute(element, "data-machina-layer");
+  if (nodeId !== void 0) node.nodeId = nodeId;
+  if (view !== void 0) node.view = view;
+  if (slot !== void 0) node.slot = slot;
+  if (debugLabel !== void 0) node.debugLabel = debugLabel;
+  if (layer !== void 0) node.layer = layer;
+  if (options.includeA11y) {
+    const role = readOptionalAttribute(element, "role");
+    const ariaLabel = readOptionalAttribute(element, "aria-label");
+    if (role !== void 0) node.role = role;
+    if (ariaLabel !== void 0) node.ariaLabel = ariaLabel;
+  }
+  if (options.includeTextExcerpt) {
+    const excerpt = textExcerpt(element, options.maxTextLength);
+    if (excerpt !== void 0) node.textExcerpt = excerpt;
+  }
+  return node;
+}
+function summarizeMachinaDom(rootOrOptions) {
+  const options = isOptions(rootOrOptions) ? rootOrOptions : { root: rootOrOptions };
+  const selector = options.selector ?? DEFAULT_SELECTOR;
+  const root = options.root ?? getGlobalDocument();
+  const summary = { schemaVersion: 1, rootSelector: selector, nodes: [] };
+  if (options.generatedAt !== void 0) summary.generatedAt = options.generatedAt;
+  if (root === void 0 || typeof root.querySelectorAll !== "function") return summary;
+  const elements = queryMatchingElements(root, selector);
+  const selected = new Set(elements);
+  const nodeByElement = /* @__PURE__ */ new Map();
+  const nodeOptions = {
+    includeTextExcerpt: options.includeTextExcerpt ?? false,
+    includeA11y: options.includeA11y ?? false,
+    maxTextLength: options.maxTextLength ?? DEFAULT_MAX_TEXT_LENGTH
+  };
+  for (const element of elements) nodeByElement.set(element, makeSummaryNode(element, nodeOptions));
+  for (const element of elements) {
+    const node = nodeByElement.get(element);
+    if (!node) continue;
+    const parent = nearestMatchingAncestor(element, selected, root);
+    const parentNode = parent === void 0 ? void 0 : nodeByElement.get(parent);
+    if (parentNode) parentNode.children.push(node);
+    else summary.nodes.push(node);
+  }
+  return summary;
+}
+export {
+  summarizeMachinaDom
+};

package/dist/react/index.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { o as MachinaDebugOverlayMode } from '../debugOverlay-pJpj0n5H.js';
+import { b as ResolvedLayoutDocument, N as NodeId, R as Rect, a as ResolvedLayoutNode } from '../types-B90jb3RW.js';
+
+type MachinaSlotProps<TViewData = unknown, TNodeData = unknown> = {
+    id: NodeId;
+    rect: Rect;
+    debugLabel?: string;
+    node: ResolvedLayoutNode;
+    viewKey?: string;
+    viewData?: TViewData;
+    nodeData?: TNodeData;
+};
+type MachinaRenderLayer = {
+    z: number;
+};
+type MachinaReactDebugOverlayOptions = {
+    mode?: MachinaDebugOverlayMode;
+    labels?: boolean;
+    borders?: boolean;
+    selectedNodeId?: string;
+};
+type MachinaReactViewProps = {
+    layout: ResolvedLayoutDocument;
+    views?: Record<string, React.ComponentType<MachinaSlotProps>>;
+    viewData?: Record<string, unknown>;
+    nodeData?: Record<NodeId, unknown>;
+    className?: string;
+    style?: React.CSSProperties;
+    nodeClassName?: string;
+    debug?: boolean;
+    nodeContainment?: "none" | "layout-paint" | "strict";
+    nodeContentVisibility?: "none" | "auto";
+    nodeContainIntrinsicSize?: string;
+    layers?: Record<string, MachinaRenderLayer>;
+    defaultLayer?: string;
+    debugOverlay?: MachinaReactDebugOverlayOptions;
+};
+declare function MachinaReactView(props: MachinaReactViewProps): React.JSX.Element;
+
+export { type MachinaReactDebugOverlayOptions, MachinaReactView, type MachinaReactViewProps, type MachinaSlotProps };

package/dist/react/index.js

@@ -0,0 +1,9 @@
+import {
+  MachinaReactView
+} from "../chunk-ZVDE7PX4.js";
+import "../chunk-2ZQ2RFFI.js";
+import "../chunk-SVWYWI7I.js";
+import "../chunk-VREK57S3.js";
+export {
+  MachinaReactView
+};

package/dist/react-native/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { N as NodeId, R as Rect, a as ResolvedLayoutNode, b as ResolvedLayoutDocument } from '../types-B90jb3RW.js';
+
+type MachinaNativeSlotProps<TViewData = unknown, TNodeData = unknown> = {
+    id: NodeId;
+    rect: Rect;
+    debugLabel?: string;
+    node: ResolvedLayoutNode;
+    viewKey?: string;
+    viewData?: TViewData;
+    nodeData?: TNodeData;
+};
+type MachinaReactNativeLayer = {
+    z: number;
+};
+type MachinaReactNativeViewProps = {
+    layout: ResolvedLayoutDocument;
+    views?: Record<string, React.ComponentType<MachinaNativeSlotProps>>;
+    viewData?: Record<string, unknown>;
+    nodeData?: Record<NodeId, unknown>;
+    layers?: Record<string, MachinaReactNativeLayer>;
+    defaultLayer?: string;
+    debug?: boolean;
+    style?: StyleProp<ViewStyle>;
+    nodeStyle?: StyleProp<ViewStyle>;
+};
+declare function MachinaReactNativeView(props: MachinaReactNativeViewProps): React.ReactElement;
+
+export { type MachinaNativeSlotProps, type MachinaReactNativeLayer, MachinaReactNativeView, type MachinaReactNativeViewProps };

package/dist/react-native/index.js

@@ -0,0 +1,84 @@
+import {
+  toResolvedTree
+} from "../chunk-SVWYWI7I.js";
+import "../chunk-VREK57S3.js";
+
+// src/react-native/MachinaReactNativeView.tsx
+import React from "react";
+import { Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizeLayerZ(value) {
+  if (value === void 0 || !Number.isFinite(value)) return 0;
+  return value;
+}
+function getLayerZ(node, layers, defaultLayer) {
+  return normalizeLayerZ(layers[node.layer ?? defaultLayer]?.z);
+}
+function renderNode(node, parentRect, props) {
+  const left = node.rect.x - parentRect.x;
+  const top = node.rect.y - parentRect.y;
+  const viewKey = node.view ?? node.slot;
+  const ViewComponent = viewKey ? props.views[viewKey] : void 0;
+  const layerZ = getLayerZ(node, props.layers, props.defaultLayer);
+  const nodeZ = node.z ?? 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: `machina-node-${node.id}`,
+      style: [
+        {
+          position: "absolute",
+          left,
+          top,
+          width: node.rect.width,
+          height: node.rect.height,
+          zIndex: layerZ * 100 + nodeZ
+        },
+        props.debug ? { borderWidth: 1, borderColor: "rgba(59, 130, 246, 0.9)" } : null,
+        props.nodeStyle
+      ],
+      children: [
+        props.debug ? /* @__PURE__ */ jsx(Text, { children: node.debugLabel ?? node.id }) : null,
+        ViewComponent && props.nodes[node.id] && viewKey ? React.createElement(ViewComponent, {
+          id: node.id,
+          rect: { ...node.rect },
+          debugLabel: node.debugLabel,
+          node: { ...props.nodes[node.id], rect: { ...props.nodes[node.id].rect } },
+          viewKey,
+          viewData: props.viewData?.[viewKey],
+          nodeData: props.nodeData?.[node.id]
+        }) : null,
+        [...node.children].map((child, index) => ({ child, index })).sort(
+          (a, b) => getLayerZ(a.child, props.layers, props.defaultLayer) - getLayerZ(b.child, props.layers, props.defaultLayer) || (a.child.z ?? 0) - (b.child.z ?? 0) || a.index - b.index
+        ).map(({ child }) => renderNode(child, node.rect, props))
+      ]
+    },
+    node.id
+  );
+}
+function MachinaReactNativeView(props) {
+  const tree = toResolvedTree(props.layout);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: "machina-root-wrapper",
+      style: [
+        { position: "relative", width: tree.rect.width, height: tree.rect.height },
+        props.style
+      ],
+      children: renderNode(tree, tree.rect, {
+        views: props.views ?? {},
+        viewData: props.viewData,
+        nodeData: props.nodeData,
+        nodes: props.layout.nodes,
+        layers: props.layers ?? { base: { z: 0 } },
+        defaultLayer: props.defaultLayer ?? "base",
+        debug: props.debug,
+        nodeStyle: props.nodeStyle
+      })
+    }
+  );
+}
+export {
+  MachinaReactNativeView
+};

package/dist/screenCatalog-ZjonGiOi.d.ts

@@ -0,0 +1,46 @@
+type MachinaViewport = {
+    key: string;
+    width: number;
+    height: number;
+    deviceScaleFactor?: number;
+    label?: string;
+    tags?: readonly string[];
+};
+type MachinaViewportMatrix = readonly MachinaViewport[];
+type MachinaScreen = {
+    key: string;
+    route: string;
+    fixture?: string;
+    viewports?: readonly string[];
+    tags?: readonly string[];
+    title?: string;
+    metadata?: Record<string, unknown>;
+};
+type MachinaScreenCatalog = {
+    screens: Record<string, MachinaScreen>;
+    order: string[];
+};
+type MachinaScreenViewportTask = {
+    key: string;
+    screenKey: string;
+    viewportKey: string;
+    route: string;
+    fixture?: string;
+    viewport: MachinaViewport;
+    screen: MachinaScreen;
+    tags: readonly string[];
+    artifactBaseName: string;
+};
+type ExpandOptions = {
+    screenKeys?: readonly string[];
+    viewportKeys?: readonly string[];
+    tags?: readonly string[];
+};
+declare function defineMachinaViewports(viewports: readonly MachinaViewport[]): MachinaViewportMatrix;
+declare function createViewportMatrix(preset?: "standard-responsive" | "desktop-only" | "mobile-first"): MachinaViewportMatrix;
+declare function defineMachinaScreens(screens: readonly MachinaScreen[]): MachinaScreenCatalog;
+declare function slugMachinaArtifactName(input: string): string;
+declare function getMachinaViewport(viewports: MachinaViewportMatrix, key: string): MachinaViewport;
+declare function expandScreenViewportTasks(catalog: MachinaScreenCatalog, viewports: MachinaViewportMatrix, options?: ExpandOptions): MachinaScreenViewportTask[];
+
+export { type MachinaViewport as M, type MachinaScreenViewportTask as a, type MachinaScreen as b, type MachinaScreenCatalog as c, type MachinaViewportMatrix as d, createViewportMatrix as e, defineMachinaScreens as f, defineMachinaViewports as g, expandScreenViewportTasks as h, getMachinaViewport as i, slugMachinaArtifactName as s };

package/dist/text/index.d.ts

@@ -0,0 +1,10 @@
+import { a as MachinaTextSource, P as ParseMachinaTextResult, d as MachinaInline, g as MachinaTextDiagnostic } from '../types-C4poVJpR.js';
+export { c as MachinaBulletItem, e as MachinaTextAlign, f as MachinaTextBlock, h as MachinaTextDiagnosticCode, i as MachinaTextDiagnosticLevel, b as MachinaTextDocument, j as MachinaTextLeading, k as MachinaTextOverflow, M as MachinaTextSpec, l as MachinaTextVariant, m as MachinaTextVerticalAlign, n as MachinaTextWrap } from '../types-C4poVJpR.js';
+
+declare function parseMachinaTextInline(text: string): {
+    inline: MachinaInline[];
+    diagnostics: MachinaTextDiagnostic[];
+};
+declare function parseMachinaText(source: MachinaTextSource | string): ParseMachinaTextResult;
+
+export { MachinaInline, MachinaTextDiagnostic, MachinaTextSource, ParseMachinaTextResult, parseMachinaText, parseMachinaTextInline };

package/dist/text/index.js

@@ -0,0 +1,9 @@
+import "../chunk-RJYRJ3LD.js";
+import {
+  parseMachinaText,
+  parseMachinaTextInline
+} from "../chunk-BJOQRPPX.js";
+export {
+  parseMachinaText,
+  parseMachinaTextInline
+};

package/dist/text/react/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { M as MachinaTextSpec, a as MachinaTextSource, b as MachinaTextDocument } from '../../types-C4poVJpR.js';
+
+type MachinaTextViewProps = {
+    text: MachinaTextSpec | MachinaTextSource | MachinaTextDocument | string;
+    className?: string;
+    style?: React.CSSProperties;
+    linkTarget?: React.HTMLAttributeAnchorTarget;
+    onLinkClick?: (href: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
+    showDiagnostics?: boolean;
+};
+declare function MachinaTextView(props: MachinaTextViewProps): React.JSX.Element;
+
+export { MachinaTextView, type MachinaTextViewProps };

package/dist/text/react/index.js

@@ -0,0 +1,7 @@
+import {
+  MachinaTextView
+} from "../../chunk-KYWOCAHK.js";
+import "../../chunk-BJOQRPPX.js";
+export {
+  MachinaTextView
+};

package/dist/text/react-native/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { M as MachinaTextSpec, a as MachinaTextSource, b as MachinaTextDocument } from '../../types-C4poVJpR.js';
+
+type MachinaNativeTextViewProps = {
+    text: MachinaTextSpec | MachinaTextSource | MachinaTextDocument | string;
+    style?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    linkStyle?: StyleProp<TextStyle>;
+    codeStyle?: StyleProp<TextStyle>;
+    onLinkPress?: (href: string) => void;
+    showDiagnostics?: boolean;
+};
+declare function MachinaNativeTextView(props: MachinaNativeTextViewProps): React.ReactElement;
+
+export { MachinaNativeTextView, type MachinaNativeTextViewProps };

package/dist/text/react-native/index.js

@@ -0,0 +1,155 @@
+import {
+  parseMachinaText
+} from "../../chunk-BJOQRPPX.js";
+
+// src/text/react-native/MachinaNativeTextView.tsx
+import React from "react";
+import { Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_POLICY = {
+  variant: "body",
+  wrap: "word",
+  overflow: "clip",
+  align: "start",
+  leading: "normal",
+  blockGap: 8,
+  listGap: 2,
+  valign: "top"
+};
+var VARIANT_STYLE = {
+  body: { fontSize: 14, fontWeight: "400" },
+  label: { fontSize: 12, fontWeight: "500" },
+  caption: { fontSize: 11, fontWeight: "400", opacity: 0.8 },
+  title: { fontSize: 18, fontWeight: "700" },
+  mono: { fontSize: 12, fontFamily: "monospace" }
+};
+var isDoc = (v) => typeof v === "object" && v !== null && "blocks" in v;
+var isSpec = (v) => typeof v === "object" && v !== null && "kind" in v && v.kind === "text";
+var normalizePositive = (v, f) => typeof v === "number" && Number.isFinite(v) && v > 0 ? v : f;
+var normalizeNonNegative = (v, f) => typeof v === "number" && Number.isFinite(v) && v >= 0 ? v : f;
+function resolveLeadingMultiplier(policy) {
+  if (policy.leading === "tight") return 1.15;
+  if (policy.leading === "loose") return 1.6;
+  if (typeof policy.leading === "number") return policy.leading;
+  if (policy.variant === "body") return 1.4;
+  if (policy.variant === "label") return 1.3;
+  if (policy.variant === "caption") return 1.25;
+  if (policy.variant === "title") return 1.25;
+  return 1.35;
+}
+function normalizeLeading(value) {
+  if (value === void 0) return DEFAULT_POLICY.leading;
+  if (value === "tight" || value === "normal" || value === "loose") return value;
+  return normalizePositive(value, resolveLeadingMultiplier(DEFAULT_POLICY));
+}
+function normalizeText(text) {
+  if (isDoc(text)) return { document: text, diagnostics: [], policy: DEFAULT_POLICY };
+  if (isSpec(text)) {
+    const result2 = parseMachinaText(text.source);
+    return {
+      document: result2.document,
+      diagnostics: result2.diagnostics,
+      policy: {
+        variant: text.variant ?? DEFAULT_POLICY.variant,
+        wrap: text.wrap ?? DEFAULT_POLICY.wrap,
+        overflow: text.overflow ?? DEFAULT_POLICY.overflow,
+        align: text.align ?? DEFAULT_POLICY.align,
+        leading: normalizeLeading(text.leading),
+        blockGap: normalizeNonNegative(text.blockGap, DEFAULT_POLICY.blockGap),
+        listGap: normalizeNonNegative(text.listGap, DEFAULT_POLICY.listGap),
+        valign: text.valign ?? DEFAULT_POLICY.valign
+      }
+    };
+  }
+  const result = parseMachinaText(typeof text === "string" ? { kind: "machina-text", text } : text);
+  return { document: result.document, diagnostics: result.diagnostics, policy: DEFAULT_POLICY };
+}
+function textStyle(policy) {
+  const base = VARIANT_STYLE[policy.variant];
+  const fontSize = base.fontSize ?? 14;
+  return {
+    ...base,
+    lineHeight: fontSize * resolveLeadingMultiplier(policy),
+    textAlign: policy.align === "center" ? "center" : policy.align === "end" ? "right" : "left"
+  };
+}
+var pProps = (policy) => policy.overflow === "ellipsis" ? { numberOfLines: 1, ellipsizeMode: "tail" } : policy.wrap === "none" ? { numberOfLines: 1 } : {};
+function renderInline(inline, key, props) {
+  switch (inline.kind) {
+    case "text":
+      return /* @__PURE__ */ jsx(React.Fragment, { children: inline.text }, key);
+    case "strong":
+      return /* @__PURE__ */ jsx(Text, { style: { fontWeight: "700" }, children: inline.children.map((c, i) => renderInline(c, `${key}-s-${i}`, props)) }, key);
+    case "emphasis":
+      return /* @__PURE__ */ jsx(Text, { style: { fontStyle: "italic" }, children: inline.children.map((c, i) => renderInline(c, `${key}-e-${i}`, props)) }, key);
+    case "code":
+      return /* @__PURE__ */ jsx(Text, { style: [{ fontFamily: "monospace" }, props.codeStyle], children: inline.text }, key);
+    case "link":
+      return /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [{ textDecorationLine: "underline", color: "#2563eb" }, props.linkStyle],
+          onPress: () => props.onLinkPress?.(inline.href),
+          children: inline.children.map((c, i) => renderInline(c, `${key}-l-${i}`, props))
+        },
+        key
+      );
+  }
+}
+function renderBullet(item, path, props, policy, depth) {
+  return /* @__PURE__ */ jsxs(View, { style: { marginBottom: policy.listGap, marginLeft: depth * 12 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx(Text, { style: textStyle(policy), children: "\u2022 " }),
+      /* @__PURE__ */ jsx(Text, { style: [{ flexShrink: 1 }, textStyle(policy)], ...pProps(policy), children: item.inline.map((i, idx) => renderInline(i, `${path}-i-${idx}`, props)) })
+    ] }),
+    item.children?.map(
+      (child, idx) => renderBullet(child, `${path}-c-${idx}`, props, policy, depth + 1)
+    )
+  ] }, path);
+}
+function MachinaNativeTextView(props) {
+  const normalized = normalizeText(props.text);
+  const justifyContent = normalized.policy.valign === "center" ? "center" : normalized.policy.valign === "bottom" ? "flex-end" : "flex-start";
+  return /* @__PURE__ */ jsx(View, { style: [{ width: "100%", height: "100%", justifyContent }, props.contentStyle], children: /* @__PURE__ */ jsxs(View, { style: { minWidth: 0 }, children: [
+    normalized.document.blocks.map(
+      (block, idx) => block.kind === "paragraph" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            textStyle(normalized.policy),
+            idx === normalized.document.blocks.length - 1 ? void 0 : { marginBottom: normalized.policy.blockGap },
+            props.style
+          ],
+          ...pProps(normalized.policy),
+          children: block.inline.map((i, iIdx) => renderInline(i, `b-${idx}-${iIdx}`, props))
+        },
+        `b-${idx}`
+      ) : /* @__PURE__ */ jsx(
+        View,
+        {
+          style: idx === normalized.document.blocks.length - 1 ? void 0 : { marginBottom: normalized.policy.blockGap },
+          children: block.items.map(
+            (item, itemIdx) => renderBullet(item, `b-${idx}-item-${itemIdx}`, props, normalized.policy, 0)
+          )
+        },
+        `b-${idx}`
+      )
+    ),
+    props.showDiagnostics && normalized.diagnostics.length > 0 ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          marginTop: normalized.policy.blockGap,
+          padding: 8,
+          fontSize: 11,
+          fontFamily: "monospace",
+          backgroundColor: "rgba(127, 127, 127, 0.12)"
+        },
+        children: normalized.diagnostics.map((d) => `${d.code} (${d.line}:${d.column}) ${d.message}`).join("\n")
+      }
+    ) : null
+  ] }) });
+}
+export {
+  MachinaNativeTextView
+};

package/dist/text/vue/index.d.ts

@@ -0,0 +1,113 @@
+import * as vue from 'vue';
+import { PropType, StyleValue } from 'vue';
+import { M as MachinaTextSpec, a as MachinaTextSource, b as MachinaTextDocument } from '../../types-C4poVJpR.js';
+
+type MachinaVueTextViewProps = {
+    text: MachinaTextSpec | MachinaTextSource | MachinaTextDocument | string;
+    rootClass?: unknown;
+    rootStyle?: StyleValue;
+    linkTarget?: string;
+    onLinkClick?: (href: string, event: MouseEvent) => void;
+    showDiagnostics?: boolean;
+    linkClass?: unknown;
+    linkStyle?: StyleValue;
+    codeClass?: unknown;
+    codeStyle?: StyleValue;
+};
+declare const MachinaVueTextView: vue.DefineComponent<vue.ExtractPropTypes<{
+    text: {
+        type: PropType<MachinaVueTextViewProps["text"]>;
+        required: true;
+    };
+    rootClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    rootStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    linkTarget: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onLinkClick: {
+        type: PropType<MachinaVueTextViewProps["onLinkClick"]>;
+        default: undefined;
+    };
+    showDiagnostics: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    linkClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    linkStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    codeClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    codeStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    text: {
+        type: PropType<MachinaVueTextViewProps["text"]>;
+        required: true;
+    };
+    rootClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    rootStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    linkTarget: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onLinkClick: {
+        type: PropType<MachinaVueTextViewProps["onLinkClick"]>;
+        default: undefined;
+    };
+    showDiagnostics: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    linkClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    linkStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    codeClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    codeStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    onLinkClick: ((href: string, event: MouseEvent) => void) | undefined;
+    rootClass: undefined;
+    rootStyle: StyleValue;
+    linkTarget: string;
+    showDiagnostics: boolean;
+    linkClass: undefined;
+    linkStyle: StyleValue;
+    codeClass: undefined;
+    codeStyle: StyleValue;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { MachinaVueTextView, type MachinaVueTextViewProps };