machinalayout 0.1.0 → 0.2.0

package/dist/text/vue/index.js

@@ -0,0 +1,202 @@
+import {
+  parseMachinaText
+} from "../../chunk-BJOQRPPX.js";
+
+// src/text/vue/MachinaVueTextView.ts
+import { computed, defineComponent, h } from "vue";
+var DEFAULT_POLICY = {
+  variant: "body",
+  wrap: "word",
+  overflow: "clip",
+  align: "start",
+  leading: "normal",
+  blockGap: 8,
+  listGap: 2,
+  valign: "top"
+};
+var INLINE_CODE_FONT = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+var VARIANT_STYLE = {
+  body: { fontSize: "14px", fontWeight: 400, lineHeight: 1.4 },
+  label: { fontSize: "12px", fontWeight: 500, lineHeight: 1.3 },
+  caption: { fontSize: "11px", fontWeight: 400, lineHeight: 1.25, opacity: 0.8 },
+  title: { fontSize: "18px", fontWeight: 700, lineHeight: 1.25 },
+  mono: { fontSize: "12px", lineHeight: 1.35, fontFamily: INLINE_CODE_FONT }
+};
+var isDocument = (v) => typeof v === "object" && v !== null && "blocks" in v;
+var isSpec = (v) => typeof v === "object" && v !== null && "kind" in v && v.kind === "text";
+var np = (v, f) => typeof v === "number" && Number.isFinite(v) && v > 0 ? v : f;
+var nnn = (v, f) => typeof v === "number" && Number.isFinite(v) && v >= 0 ? v : f;
+var resolveLineHeight = (p) => p.leading === "tight" ? 1.15 : p.leading === "loose" ? 1.6 : typeof p.leading === "number" ? p.leading : VARIANT_STYLE[p.variant].lineHeight;
+var normalizeLeading = (v) => v === void 0 ? DEFAULT_POLICY.leading : v === "tight" || v === "normal" || v === "loose" ? v : np(v, resolveLineHeight(DEFAULT_POLICY));
+var normalizeSpecPolicy = (s) => ({
+  variant: s.variant ?? DEFAULT_POLICY.variant,
+  wrap: s.wrap ?? DEFAULT_POLICY.wrap,
+  overflow: s.overflow ?? DEFAULT_POLICY.overflow,
+  align: s.align ?? DEFAULT_POLICY.align,
+  leading: normalizeLeading(s.leading),
+  blockGap: nnn(s.blockGap, DEFAULT_POLICY.blockGap),
+  listGap: nnn(s.listGap, DEFAULT_POLICY.listGap),
+  valign: s.valign ?? DEFAULT_POLICY.valign
+});
+function normalizeText(text) {
+  if (isDocument(text)) return { document: text, diagnostics: [], policy: DEFAULT_POLICY };
+  if (isSpec(text)) {
+    const r2 = parseMachinaText(text.source);
+    return { document: r2.document, diagnostics: r2.diagnostics, policy: normalizeSpecPolicy(text) };
+  }
+  const r = parseMachinaText(typeof text === "string" ? { kind: "machina-text", text } : text);
+  return { document: r.document, diagnostics: r.diagnostics, policy: DEFAULT_POLICY };
+}
+function policyStyle(policy) {
+  const wrap = policy.wrap === "word" ? { whiteSpace: "normal", overflowWrap: "anywhere" } : { whiteSpace: "nowrap" };
+  const ov = policy.overflow === "clip" ? { overflow: "hidden" } : policy.overflow === "ellipsis" ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : { overflow: "auto" };
+  const align = policy.align === "center" ? { textAlign: "center" } : policy.align === "end" ? { textAlign: "right" } : { textAlign: "left" };
+  const jc = policy.valign === "center" ? "center" : policy.valign === "bottom" ? "flex-end" : "flex-start";
+  return {
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: jc,
+    minWidth: 0,
+    ...VARIANT_STYLE[policy.variant],
+    lineHeight: resolveLineHeight(policy),
+    ...wrap,
+    ...ov,
+    ...align
+  };
+}
+function renderInline(inline, key, props) {
+  switch (inline.kind) {
+    case "text":
+      return inline.text;
+    case "strong":
+      return h(
+        "strong",
+        { key },
+        inline.children.map((c, i) => renderInline(c, `${key}-s-${i}`, props))
+      );
+    case "emphasis":
+      return h(
+        "em",
+        { key },
+        inline.children.map((c, i) => renderInline(c, `${key}-e-${i}`, props))
+      );
+    case "code":
+      return h(
+        "code",
+        {
+          key,
+          class: props.codeClass,
+          style: [
+            {
+              fontFamily: INLINE_CODE_FONT,
+              backgroundColor: "rgba(127, 127, 127, 0.15)",
+              borderRadius: "3px",
+              padding: "0 0.25em"
+            },
+            props.codeStyle
+          ]
+        },
+        inline.text
+      );
+    case "link": {
+      const rel = props.linkTarget === "_blank" ? "noreferrer noopener" : void 0;
+      return h(
+        "a",
+        {
+          key,
+          href: inline.href,
+          target: props.linkTarget,
+          rel,
+          class: props.linkClass,
+          style: props.linkStyle,
+          onClick: (e) => props.onLinkClick?.(inline.href, e)
+        },
+        inline.children.map((c, i) => renderInline(c, `${key}-l-${i}`, props))
+      );
+    }
+  }
+}
+function renderBulletItem(item, path, props, listGap) {
+  return h("li", { key: path, style: { marginBottom: `${listGap}px` } }, [
+    ...item.inline.map((i, idx) => renderInline(i, `${path}-i-${idx}`, props)),
+    ...item.children?.length ? [
+      h(
+        "ul",
+        { style: { margin: "0.25em 0 0 0", paddingLeft: "1.25em" } },
+        item.children.map((c, idx) => renderBulletItem(c, `${path}-c-${idx}`, props, listGap))
+      )
+    ] : []
+  ]);
+}
+var MachinaVueTextView = defineComponent({
+  name: "MachinaVueTextView",
+  props: {
+    text: { type: [String, Object], required: true },
+    rootClass: { type: null, default: void 0 },
+    rootStyle: { type: null, default: void 0 },
+    linkTarget: { type: String, default: void 0 },
+    onLinkClick: {
+      type: Function,
+      default: void 0
+    },
+    showDiagnostics: { type: Boolean, default: false },
+    linkClass: { type: null, default: void 0 },
+    linkStyle: { type: null, default: void 0 },
+    codeClass: { type: null, default: void 0 },
+    codeStyle: { type: null, default: void 0 }
+  },
+  setup(props) {
+    const normalized = computed(() => normalizeText(props.text));
+    return () => h(
+      "div",
+      { class: props.rootClass, style: [policyStyle(normalized.value.policy), props.rootStyle] },
+      [
+        h("div", { style: { minWidth: 0 } }, [
+          ...normalized.value.document.blocks.map((block, index) => {
+            const blockStyle = {
+              margin: index === normalized.value.document.blocks.length - 1 ? "0" : `0 0 ${normalized.value.policy.blockGap}px 0`
+            };
+            return block.kind === "paragraph" ? h(
+              "p",
+              { key: `b-${index}`, style: blockStyle },
+              block.inline.map((i, idx) => renderInline(i, `b-${index}-${idx}`, props))
+            ) : h(
+              "ul",
+              { key: `b-${index}`, style: { ...blockStyle, paddingLeft: "1.25em" } },
+              block.items.map(
+                (item, itemIndex) => renderBulletItem(
+                  item,
+                  `b-${index}-item-${itemIndex}`,
+                  props,
+                  normalized.value.policy.listGap
+                )
+              )
+            );
+          }),
+          ...props.showDiagnostics && normalized.value.diagnostics.length > 0 ? [
+            h(
+              "pre",
+              {
+                style: {
+                  margin: `${normalized.value.policy.blockGap}px 0 0 0`,
+                  padding: "0.5em",
+                  fontSize: "11px",
+                  fontFamily: INLINE_CODE_FONT,
+                  whiteSpace: "pre-wrap",
+                  background: "rgba(127, 127, 127, 0.12)"
+                }
+              },
+              normalized.value.diagnostics.map((d) => `${d.code} (${d.line}:${d.column}) ${d.message}`).join("\n")
+            )
+          ] : []
+        ])
+      ]
+    );
+  }
+});
+export {
+  MachinaVueTextView
+};

package/dist/types-BudfpzZX.d.ts

@@ -0,0 +1,184 @@
+type NodeId = string;
+type LayerName = string;
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type AbsoluteFrame = {
+    kind: "absolute";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type UiLength = number | {
+    unit: "px";
+    value: number;
+} | {
+    unit: "ui";
+    value: number;
+};
+type OffsetSpec = {
+    x?: UiLength;
+    y?: UiLength;
+};
+type RectEdge = "left" | "right" | "top" | "bottom" | "centerX" | "centerY";
+type EdgeRef = {
+    ref: NodeId;
+    edge: RectEdge;
+    offset?: UiLength;
+};
+type GuideLength = UiLength | EdgeRef;
+type AnchorFrame = {
+    kind: "anchor";
+    left?: UiLength;
+    right?: UiLength;
+    top?: UiLength;
+    bottom?: UiLength;
+    width?: UiLength;
+    height?: UiLength;
+};
+type GuideFrame = {
+    kind: "guide";
+    left?: GuideLength;
+    right?: GuideLength;
+    top?: GuideLength;
+    bottom?: GuideLength;
+    width?: UiLength;
+    height?: UiLength;
+};
+type RootFrame = {
+    kind: "root";
+};
+type FixedFrame = {
+    kind: "fixed";
+    width: number;
+    height: number;
+};
+type FillFrame = {
+    kind: "fill";
+    weight?: number;
+    cross?: number | "fill";
+};
+type CellFrame = {
+    kind: "cell";
+    col: number;
+    row: number;
+    colSpan?: number;
+    rowSpan?: number;
+};
+type FrameSpec = RootFrame | AbsoluteFrame | AnchorFrame | FixedFrame | FillFrame | CellFrame | GuideFrame;
+type StackAxis = "horizontal" | "vertical";
+type StackJustify = "start" | "center" | "end" | "space-between";
+type StackAlign = "start" | "center" | "end";
+type EdgeInsets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type StackArrange = {
+    kind: "stack";
+    axis: StackAxis;
+    gap?: number;
+    padding?: number | EdgeInsets;
+    justify?: StackJustify;
+    align?: StackAlign;
+};
+type GridTrack = {
+    kind: "fixed";
+    size: number;
+} | {
+    kind: "fill";
+    weight?: number;
+};
+type GridArrange = {
+    kind: "grid";
+    columns: GridTrack[];
+    rows: GridTrack[];
+    columnGap?: number;
+    rowGap?: number;
+    padding?: number | EdgeInsets;
+};
+type ArrangeSpec = StackArrange | GridArrange;
+type LayoutVariantCondition = {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+};
+type LayoutRowVariant = {
+    when: LayoutVariantCondition;
+    frame?: FrameSpec;
+    arrange?: ArrangeSpec;
+    offset?: OffsetSpec;
+    z?: number;
+    view?: string;
+    slot?: string;
+    debugLabel?: string;
+    layer?: LayerName;
+};
+type LayoutRow = {
+    id: NodeId;
+    parent?: NodeId;
+    order?: number;
+    z?: number;
+    frame: FrameSpec;
+    arrange?: ArrangeSpec;
+    view?: string;
+    slot?: string;
+    debugLabel?: string;
+    layer?: LayerName;
+    offset?: OffsetSpec;
+    variants?: LayoutRowVariant[];
+};
+type LayoutNode = {
+    id: NodeId;
+    z?: number;
+    frame: FrameSpec;
+    arrange?: ArrangeSpec;
+    view?: string;
+    slot?: string;
+    debugLabel?: string;
+    layer?: LayerName;
+    offset?: OffsetSpec;
+};
+type LayoutDocument = {
+    rootId: NodeId;
+    nodes: Record<NodeId, LayoutNode>;
+    children: Record<NodeId, NodeId[]>;
+};
+type ResolvedLayoutNode = {
+    id: NodeId;
+    z?: number;
+    rect: Rect;
+    frame: FrameSpec;
+    arrange?: ArrangeSpec;
+    view?: string;
+    slot?: string;
+    debugLabel?: string;
+    layer?: LayerName;
+    offset?: OffsetSpec;
+};
+type ResolvedLayoutDocument = {
+    rootId: NodeId;
+    nodes: Record<NodeId, ResolvedLayoutNode>;
+    children: Record<NodeId, NodeId[]>;
+};
+type ResolvedLayoutTree = {
+    id: NodeId;
+    z?: number;
+    rect: Rect;
+    frame: FrameSpec;
+    arrange?: ArrangeSpec;
+    view?: string;
+    slot?: string;
+    debugLabel?: string;
+    layer?: LayerName;
+    offset?: OffsetSpec;
+    children: ResolvedLayoutTree[];
+};
+
+export type { AbsoluteFrame as A, CellFrame as C, EdgeInsets as E, FrameSpec as F, GridArrange as G, LayoutRow as L, NodeId as N, OffsetSpec as O, Rect as R, StackAlign as S, UiLength as U, ResolvedLayoutNode as a, ResolvedLayoutDocument as b, LayoutDocument as c, ResolvedLayoutTree as d, AnchorFrame as e, ArrangeSpec as f, EdgeRef as g, FillFrame as h, FixedFrame as i, GridTrack as j, GuideFrame as k, GuideLength as l, LayerName as m, LayoutNode as n, LayoutRowVariant as o, LayoutVariantCondition as p, RectEdge as q, RootFrame as r, StackArrange as s, StackAxis as t, StackJustify as u };

package/dist/types-C4poVJpR.d.ts

@@ -0,0 +1,74 @@
+type MachinaTextSource = {
+    kind: "plain";
+    text: string;
+} | {
+    kind: "machina-text";
+    text: string;
+};
+type MachinaTextVariant = "body" | "label" | "caption" | "title" | "mono";
+type MachinaTextWrap = "word" | "none";
+type MachinaTextOverflow = "clip" | "ellipsis" | "scroll";
+type MachinaTextAlign = "start" | "center" | "end";
+type MachinaTextLeading = "tight" | "normal" | "loose" | number;
+type MachinaTextVerticalAlign = "top" | "center" | "bottom";
+type MachinaTextSpec = {
+    kind: "text";
+    source: MachinaTextSource;
+    variant?: MachinaTextVariant;
+    wrap?: MachinaTextWrap;
+    overflow?: MachinaTextOverflow;
+    align?: MachinaTextAlign;
+    leading?: MachinaTextLeading;
+    blockGap?: number;
+    listGap?: number;
+    valign?: MachinaTextVerticalAlign;
+};
+type MachinaTextDocument = {
+    blocks: MachinaTextBlock[];
+};
+type MachinaTextBlock = {
+    kind: "paragraph";
+    inline: MachinaInline[];
+} | {
+    kind: "bulletList";
+    items: MachinaBulletItem[];
+};
+type MachinaBulletItem = {
+    inline: MachinaInline[];
+    children?: MachinaBulletItem[];
+};
+type MachinaInline = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "strong";
+    children: MachinaInline[];
+} | {
+    kind: "emphasis";
+    children: MachinaInline[];
+} | {
+    kind: "code";
+    text: string;
+} | {
+    kind: "link";
+    href: string;
+    children: MachinaInline[];
+};
+type MachinaTextDiagnosticLevel = "error" | "warning";
+type MachinaTextDiagnosticCode = "unsupported_syntax" | "heading_forbidden" | "max_list_depth_exceeded" | "malformed_link" | "unclosed_inline" | "invalid_escape";
+type MachinaTextDiagnostic = {
+    code: MachinaTextDiagnosticCode;
+    message: string;
+    index: number;
+    length: number;
+    line: number;
+    column: number;
+    level: MachinaTextDiagnosticLevel;
+};
+type ParseMachinaTextResult = {
+    ok: boolean;
+    document: MachinaTextDocument;
+    diagnostics: MachinaTextDiagnostic[];
+};
+
+export type { MachinaTextSpec as M, ParseMachinaTextResult as P, MachinaTextSource as a, MachinaTextDocument as b, MachinaBulletItem as c, MachinaInline as d, MachinaTextAlign as e, MachinaTextBlock as f, MachinaTextDiagnostic as g, MachinaTextDiagnosticCode as h, MachinaTextDiagnosticLevel as i, MachinaTextLeading as j, MachinaTextOverflow as k, MachinaTextVariant as l, MachinaTextVerticalAlign as m, MachinaTextWrap as n };

package/dist/vue/index.d.ts

@@ -0,0 +1,173 @@
+import * as vue from 'vue';
+import { PropType, Component, StyleValue } from 'vue';
+import { N as NodeId, R as Rect, a as ResolvedLayoutNode, b as ResolvedLayoutDocument } from '../types-BudfpzZX.js';
+
+type MachinaVueSlotProps<TViewData = unknown, TNodeData = unknown> = {
+    id: NodeId;
+    rect: Rect;
+    debugLabel?: string;
+    node: ResolvedLayoutNode;
+    viewKey?: string;
+    viewData?: TViewData;
+    nodeData?: TNodeData;
+};
+type MachinaVueLayer = {
+    z: number;
+};
+type MachinaVueViewProps = {
+    layout: ResolvedLayoutDocument;
+    views?: Record<string, Component>;
+    viewData?: Record<string, unknown>;
+    nodeData?: Record<NodeId, unknown>;
+    layers?: Record<string, MachinaVueLayer>;
+    defaultLayer?: string;
+    debug?: boolean;
+    rootClass?: unknown;
+    rootStyle?: StyleValue;
+    nodeClass?: unknown;
+    nodeStyle?: StyleValue;
+    nodeContainment?: "none" | "layout-paint" | "strict";
+    nodeContentVisibility?: "none" | "auto";
+    nodeContainIntrinsicSize?: string;
+};
+declare const MachinaVueView: vue.DefineComponent<vue.ExtractPropTypes<{
+    layout: {
+        type: PropType<ResolvedLayoutDocument>;
+        required: true;
+    };
+    views: {
+        type: PropType<Record<string, Component>>;
+        default: () => {};
+    };
+    viewData: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    nodeData: {
+        type: PropType<Record<NodeId, unknown>>;
+        default: () => {};
+    };
+    layers: {
+        type: PropType<Record<string, MachinaVueLayer>>;
+        default: () => {
+            base: {
+                z: number;
+            };
+        };
+    };
+    defaultLayer: {
+        type: StringConstructor;
+        default: string;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rootClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    rootStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    nodeClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    nodeStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    nodeContainment: {
+        type: PropType<"none" | "layout-paint" | "strict">;
+        default: string;
+    };
+    nodeContentVisibility: {
+        type: PropType<"none" | "auto">;
+        default: string;
+    };
+    nodeContainIntrinsicSize: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    layout: {
+        type: PropType<ResolvedLayoutDocument>;
+        required: true;
+    };
+    views: {
+        type: PropType<Record<string, Component>>;
+        default: () => {};
+    };
+    viewData: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    nodeData: {
+        type: PropType<Record<NodeId, unknown>>;
+        default: () => {};
+    };
+    layers: {
+        type: PropType<Record<string, MachinaVueLayer>>;
+        default: () => {
+            base: {
+                z: number;
+            };
+        };
+    };
+    defaultLayer: {
+        type: StringConstructor;
+        default: string;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rootClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    rootStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    nodeClass: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    nodeStyle: {
+        type: PropType<StyleValue>;
+        default: undefined;
+    };
+    nodeContainment: {
+        type: PropType<"none" | "layout-paint" | "strict">;
+        default: string;
+    };
+    nodeContentVisibility: {
+        type: PropType<"none" | "auto">;
+        default: string;
+    };
+    nodeContainIntrinsicSize: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    views: Record<string, Component>;
+    viewData: Record<string, unknown>;
+    nodeData: Record<string, unknown>;
+    layers: Record<string, MachinaVueLayer>;
+    defaultLayer: string;
+    debug: boolean;
+    rootClass: undefined;
+    rootStyle: StyleValue;
+    nodeClass: undefined;
+    nodeStyle: StyleValue;
+    nodeContainment: "none" | "layout-paint" | "strict";
+    nodeContentVisibility: "none" | "auto";
+    nodeContainIntrinsicSize: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { type MachinaVueLayer, type MachinaVueSlotProps, MachinaVueView, type MachinaVueViewProps };