@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-YF4NSSMT.js

@@ -0,0 +1,366 @@
+import { StreamFade } from './chunk-WSW6ZFAQ.js';
+import { CodeBlock } from './chunk-TOXAGRDQ.js';
+import * as React from 'react';
+import { View, Text, Linking } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/markdown/parse.ts
+function safeHref(raw) {
+  const cleaned = raw.replace(/[\u0000-\u001F\u007F-\u009F]/g, "").trim();
+  if (cleaned === "") return null;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(cleaned);
+  if (!scheme) return cleaned;
+  return /^(?:https?|mailto)$/i.test(scheme[1]) ? cleaned : null;
+}
+function parseInline(src) {
+  const nodes = [];
+  let buf = "";
+  let i = 0;
+  const flush = () => {
+    if (buf !== "") {
+      nodes.push({ type: "text", value: buf });
+      buf = "";
+    }
+  };
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "`") {
+      const end = src.indexOf("`", i + 1);
+      if (end !== -1) {
+        flush();
+        nodes.push({ type: "code", value: src.slice(i + 1, end) });
+        i = end + 1;
+        continue;
+      }
+    }
+    if ((c === "*" || c === "_") && src[i + 1] === c) {
+      const delim = c + c;
+      const end = src.indexOf(delim, i + 2);
+      if (end > i + 2) {
+        flush();
+        nodes.push({ type: "strong", children: parseInline(src.slice(i + 2, end)) });
+        i = end + 2;
+        continue;
+      }
+    }
+    if (c === "*" || c === "_") {
+      const end = src.indexOf(c, i + 1);
+      if (end > i + 1) {
+        flush();
+        nodes.push({ type: "em", children: parseInline(src.slice(i + 1, end)) });
+        i = end + 1;
+        continue;
+      }
+    }
+    if (c === "[") {
+      const close = src.indexOf("]", i + 1);
+      if (close !== -1 && src[close + 1] === "(") {
+        const paren = src.indexOf(")", close + 2);
+        if (paren !== -1) {
+          flush();
+          nodes.push({
+            type: "link",
+            href: src.slice(close + 2, paren).trim(),
+            children: parseInline(src.slice(i + 1, close))
+          });
+          i = paren + 1;
+          continue;
+        }
+      }
+    }
+    buf += c;
+    i += 1;
+  }
+  flush();
+  return nodes;
+}
+function linesToInline(lines) {
+  const out = [];
+  lines.forEach((line, idx) => {
+    const hard = /\s{2,}$/.test(line);
+    out.push(...parseInline(line.trim()));
+    if (idx < lines.length - 1) out.push(hard ? { type: "br" } : { type: "text", value: " " });
+  });
+  return out;
+}
+var HEADING = /^ {0,3}(#{1,6})\s+(.*?)(?:\s+#+)?\s*$/;
+var FENCE = /^ {0,3}(```|~~~)\s*([\w+-]*)\s*$/;
+var HR = /^ {0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
+var UL = /^ {0,3}[-*+]\s+(.*)$/;
+var OL = /^ {0,3}(\d{1,9})[.)]\s+(.*)$/;
+var QUOTE = /^ {0,3}>\s?(.*)$/;
+function parseMarkdown(content) {
+  const lines = content.replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let i = 0;
+  const isBlank = (s) => s.trim() === "";
+  const startsBlock = (s) => HEADING.test(s) || FENCE.test(s) || HR.test(s) || UL.test(s) || OL.test(s) || QUOTE.test(s);
+  while (i < lines.length) {
+    const line = lines[i];
+    if (isBlank(line)) {
+      i += 1;
+      continue;
+    }
+    const fence = FENCE.exec(line);
+    if (fence) {
+      const marker = fence[1];
+      const lang = fence[2] ? fence[2] : null;
+      const body = [];
+      i += 1;
+      while (i < lines.length && !new RegExp(`^ {0,3}${marker}\\s*$`).test(lines[i])) {
+        body.push(lines[i]);
+        i += 1;
+      }
+      if (i < lines.length) i += 1;
+      blocks.push({ type: "code", lang, value: body.join("\n") });
+      continue;
+    }
+    const heading = HEADING.exec(line);
+    if (heading) {
+      blocks.push({
+        type: "heading",
+        level: heading[1].length,
+        children: parseInline(heading[2].trim())
+      });
+      i += 1;
+      continue;
+    }
+    if (HR.test(line)) {
+      blocks.push({ type: "hr" });
+      i += 1;
+      continue;
+    }
+    if (QUOTE.test(line)) {
+      const quote = [];
+      while (i < lines.length && QUOTE.test(lines[i])) {
+        quote.push(QUOTE.exec(lines[i])[1]);
+        i += 1;
+      }
+      blocks.push({ type: "blockquote", children: linesToInline(quote) });
+      continue;
+    }
+    const ol = OL.exec(line);
+    const ul = UL.exec(line);
+    if (ol || ul) {
+      const ordered = Boolean(ol);
+      const start = ol ? Number(ol[1]) : 1;
+      const items = [];
+      while (i < lines.length) {
+        const m = ordered ? OL.exec(lines[i]) : UL.exec(lines[i]);
+        if (!m) break;
+        items.push(parseInline((ordered ? m[2] : m[1]).trim()));
+        i += 1;
+      }
+      blocks.push({ type: "list", ordered, start, items });
+      continue;
+    }
+    const para = [];
+    while (i < lines.length && !isBlank(lines[i]) && !startsBlock(lines[i])) {
+      para.push(lines[i]);
+      i += 1;
+    }
+    blocks.push({ type: "paragraph", children: linesToInline(para) });
+  }
+  return blocks;
+}
+var HEADING_ROLE = {
+  1: "largeTitle",
+  2: "title1",
+  3: "title2",
+  4: "title3",
+  5: "headline",
+  6: "subheadline"
+};
+function useInlineRenderer() {
+  const { styles } = useStyles(sheet);
+  const render = React.useCallback(
+    (nodes, keyPrefix) => nodes.map((node, i) => {
+      const key = `${keyPrefix}-${i}`;
+      switch (node.type) {
+        case "text":
+          return /* @__PURE__ */ jsx(Text, { children: node.value }, key);
+        case "br":
+          return /* @__PURE__ */ jsx(Text, { children: "\n" }, key);
+        case "strong":
+          return /* @__PURE__ */ jsx(Text, { style: styles.strong, children: render(node.children, key) }, key);
+        case "em":
+          return /* @__PURE__ */ jsx(Text, { style: styles.em, children: render(node.children, key) }, key);
+        case "code":
+          return /* @__PURE__ */ jsx(Text, { style: styles.inlineCode, children: node.value }, key);
+        case "link": {
+          const href = safeHref(node.href);
+          if (href === null) {
+            return /* @__PURE__ */ jsx(Text, { children: render(node.children, key) }, key);
+          }
+          return /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: styles.link,
+              accessibilityRole: "link",
+              onPress: () => {
+                void Linking.openURL(href);
+              },
+              children: render(node.children, key)
+            },
+            key
+          );
+        }
+      }
+    }),
+    [styles]
+  );
+  return render;
+}
+function Markdown({
+  content,
+  streaming = false,
+  motion = "none"
+}) {
+  const { styles } = useStyles(sheet);
+  const renderInline = useInlineRenderer();
+  const blocks = React.useMemo(() => parseMarkdown(content), [content]);
+  const animate = streaming && motion === "full";
+  const prevCount = React.useRef(0);
+  const firstRender = React.useRef(true);
+  const baseline = firstRender.current ? Number.POSITIVE_INFINITY : prevCount.current;
+  React.useEffect(() => {
+    prevCount.current = blocks.length;
+    firstRender.current = false;
+  });
+  const renderBlock = (block, index) => {
+    switch (block.type) {
+      case "heading":
+        return /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: [styles.heading, styles[`h${block.level}`]],
+            children: renderInline(block.children, `h${index}`)
+          }
+        );
+      case "paragraph":
+        return /* @__PURE__ */ jsx(Text, { style: styles.paragraph, children: renderInline(block.children, `p${index}`) });
+      case "hr":
+        return /* @__PURE__ */ jsx(View, { style: styles.hr, accessibilityRole: "none" });
+      case "code":
+        return /* @__PURE__ */ jsx(CodeBlock, { code: block.value, language: block.lang ?? void 0, showLineNumbers: false });
+      case "blockquote":
+        return /* @__PURE__ */ jsxs(View, { style: styles.blockquote, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.blockquoteBar }),
+          /* @__PURE__ */ jsx(Text, { style: styles.blockquoteText, children: renderInline(block.children, `q${index}`) })
+        ] });
+      case "list":
+        return /* @__PURE__ */ jsx(View, { style: styles.list, children: block.items.map((item, j) => /* @__PURE__ */ jsxs(View, { style: styles.listItem, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.marker, children: block.ordered ? `${block.start + j}.` : "\u2022" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.listItemText, children: renderInline(item, `l${index}-${j}`) })
+        ] }, j)) });
+    }
+  };
+  return /* @__PURE__ */ jsx(View, { style: styles.root, children: blocks.map((block, i) => {
+    const el = renderBlock(block, i);
+    if (animate && i >= baseline) {
+      return /* @__PURE__ */ jsx(StreamFade, { children: el }, i);
+    }
+    return /* @__PURE__ */ jsx(React.Fragment, { children: el }, i);
+  }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { gap: theme.space.s3 },
+  // Headings: the mobile type ramp carries the level; ink stays full.
+  heading: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    color: theme.color.text
+  },
+  h1: {
+    fontSize: theme.type[HEADING_ROLE[1]].fontSize,
+    lineHeight: theme.type[HEADING_ROLE[1]].lineHeight,
+    letterSpacing: theme.type[HEADING_ROLE[1]].letterSpacing
+  },
+  h2: {
+    fontSize: theme.type[HEADING_ROLE[2]].fontSize,
+    lineHeight: theme.type[HEADING_ROLE[2]].lineHeight,
+    letterSpacing: theme.type[HEADING_ROLE[2]].letterSpacing
+  },
+  h3: {
+    fontSize: theme.type[HEADING_ROLE[3]].fontSize,
+    lineHeight: theme.type[HEADING_ROLE[3]].lineHeight,
+    letterSpacing: theme.type[HEADING_ROLE[3]].letterSpacing
+  },
+  h4: {
+    fontSize: theme.type[HEADING_ROLE[4]].fontSize,
+    lineHeight: theme.type[HEADING_ROLE[4]].lineHeight,
+    letterSpacing: theme.type[HEADING_ROLE[4]].letterSpacing
+  },
+  h5: {
+    fontSize: theme.type[HEADING_ROLE[5]].fontSize,
+    lineHeight: theme.type[HEADING_ROLE[5]].lineHeight,
+    letterSpacing: theme.type[HEADING_ROLE[5]].letterSpacing
+  },
+  h6: {
+    fontSize: theme.type[HEADING_ROLE[6]].fontSize,
+    lineHeight: theme.type[HEADING_ROLE[6]].lineHeight,
+    letterSpacing: theme.type[HEADING_ROLE[6]].letterSpacing
+  },
+  // Body copy — secondary ink, the AA-safe muted foreground on a surface.
+  paragraph: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.text2
+  },
+  // Inline runs. Nested `Text` inherits the parent size, so these only add the
+  // treatment that distinguishes them.
+  strong: { fontWeight: theme.fontWeight.bold, color: theme.color.text },
+  em: { fontStyle: "italic" },
+  inlineCode: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.accentStrong,
+    backgroundColor: theme.color.surface2
+  },
+  // Links use accent-strong (AA against the surface) plus an underline, so the
+  // affordance survives greyscale — colour alone is not enough.
+  link: { color: theme.color.accentStrong, textDecorationLine: "underline" },
+  list: { gap: theme.space.s2 },
+  listItem: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  marker: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text3,
+    minWidth: theme.space.s4
+  },
+  listItemText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.text2
+  },
+  // Blockquote — a leading accent bar (order mirrors under RTL for free) beside
+  // the quoted text.
+  blockquote: { flexDirection: "row", gap: theme.space.s3, alignItems: "stretch" },
+  blockquoteBar: {
+    width: theme.borderWidth.heavy,
+    backgroundColor: theme.color.accent,
+    borderRadius: theme.borderWidth.heavy
+  },
+  blockquoteText: {
+    flex: 1,
+    fontFamily: theme.font.display,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    color: theme.color.text
+  },
+  hr: {
+    height: theme.borderWidth.base,
+    backgroundColor: theme.color.border,
+    marginVertical: theme.space.s2
+  }
+}));
+
+export { Markdown, parseInline, parseMarkdown, safeHref };

package/dist/chunk-YG3ZJHGU.js

@@ -0,0 +1,223 @@
+import { Spinner } from './chunk-O7AE6DAF.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { Animated, Easing, View, Pressable, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+var TRACK = {
+  ios: { sm: { width: 40, height: 24 }, md: { width: 52, height: 32 } },
+  // loam-allow-raw: ramp keys
+  android: { sm: { width: 40, height: 18 }, md: { width: 52, height: 22 } }
+  // loam-allow-raw: ramp keys
+};
+var IOS_PAD = 2;
+var ANDROID_OVERHANG = 4;
+var HEAVY_SHADOW_RATIO = 1.2;
+function knobShadow(theme, os) {
+  if (os === "ios") return theme.shadow.knob;
+  return {
+    ...theme.shadow.knob,
+    shadowOffset: { width: 0, height: theme.space[2] },
+    shadowOpacity: theme.shadow.knob.shadowOpacity * HEAVY_SHADOW_RATIO,
+    shadowRadius: theme.space[6],
+    elevation: 3
+    // loam-allow-raw: Android depth between shadow.knob (2) and shadow.md (4).
+  };
+}
+function geometry(theme, os, size) {
+  const spec = TRACK[os][size];
+  const width = theme.space[spec.width];
+  const height = theme.space[spec.height];
+  const pad = theme.space[IOS_PAD];
+  if (os === "ios") {
+    const knob2 = height - 2 * pad;
+    return { width, height, pad, knob: knob2, travel: width - 2 * pad - knob2 };
+  }
+  const knob = height + theme.space[ANDROID_OVERHANG];
+  return { width, height, pad: 0, knob, travel: width - knob };
+}
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme();
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function Switch({
+  value,
+  defaultValue = false,
+  onValueChange,
+  size = "md",
+  platform,
+  disabled = false,
+  pending = false,
+  motion = "full",
+  accessibilityLabel,
+  decorative = false
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const checked = isControlled ? value : internal;
+  const theme = useLoamTheme();
+  const os = useResolvedPlatform(platform);
+  const shape = `${os}-${size}`;
+  const { styles } = useStyles(sheet, { shape, disabled });
+  const { travel, width: trackW, height: trackH } = geometry(theme, os, size);
+  const slopX = Math.max(0, (theme.tapMin - trackW) / 2);
+  const slopY = Math.max(0, (theme.tapMin - trackH) / 2);
+  const resolved = useResolvedMotion(motion);
+  const tint = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const slide = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
+  React.useEffect(() => {
+    const to = checked ? 1 : 0;
+    if (resolved === "none") {
+      tint.setValue(to);
+    } else {
+      Animated.timing(tint, {
+        toValue: to,
+        duration: theme.duration.base,
+        easing: Easing.bezier(...theme.easing.base),
+        // Colour interpolation cannot run on the native driver.
+        useNativeDriver: false
+      }).start();
+    }
+    if (resolved === "full") {
+      Animated.timing(slide, {
+        toValue: to,
+        duration: theme.duration.base,
+        easing: Easing.bezier(...theme.easing.spring),
+        useNativeDriver: true
+      }).start();
+    } else {
+      slide.setValue(to);
+    }
+  }, [checked, resolved, tint, slide, theme.duration.base, theme.easing.base, theme.easing.spring]);
+  const trackColor = tint.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.color.surface3, os === "ios" ? theme.color.good : theme.color.accentSoft]
+  });
+  const knobColor = pending ? theme.color.knob : os === "ios" ? theme.color.knob : tint.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.color.text3, theme.color.accent]
+  });
+  const translateX = slide.interpolate({
+    inputRange: [0, 1],
+    // The knob travels toward the end edge; only the sign of an X translation
+    // needs mirroring by hand.
+    outputRange: [0, theme.rtl ? -travel : travel]
+  });
+  const toggle = () => {
+    const next = !checked;
+    if (!isControlled) setInternal(next);
+    haptics.impact("medium");
+    onValueChange?.(next);
+  };
+  const visual = /* @__PURE__ */ jsx(Animated.View, { style: [styles.track, { backgroundColor: trackColor }], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.knobSlot, { transform: [{ translateX }] }], children: /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "switch-knob",
+      style: [styles.knob, pending && styles.knobBusy, { backgroundColor: knobColor }],
+      children: pending ? (
+        // Hidden from assistive tech — the switch's own `busy` state carries
+        // the meaning, so the nested progressbar is suppressed.
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "switch-spinner",
+            style: styles.spinner,
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: /* @__PURE__ */ jsx(
+              Spinner,
+              {
+                size: "sm",
+                color: theme.color.accent,
+                motion,
+                accessibilityLabel: "Loading"
+              }
+            )
+          }
+        )
+      ) : null
+    }
+  ) }) });
+  if (decorative) {
+    return /* @__PURE__ */ jsx(View, { accessible: false, style: styles.decorative, children: visual });
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "switch",
+      accessibilityLabel,
+      accessibilityState: { checked, disabled, busy: pending },
+      "aria-checked": checked,
+      "aria-busy": pending || void 0,
+      disabled,
+      onPress: disabled || pending ? void 0 : toggle,
+      hitSlop: { top: slopY, bottom: slopY, left: slopX, right: slopX },
+      children: visual
+    }
+  );
+}
+function trackStyle(theme, os, size) {
+  const g = geometry(theme, os, size);
+  return { width: g.width, height: g.height, padding: g.pad };
+}
+function knobStyle(theme, os, size) {
+  const g = geometry(theme, os, size);
+  return { width: g.knob, height: g.knob, ...knobShadow(theme, os) };
+}
+var sheet = createStyleSheet((theme) => ({
+  // Decorative glyph wrapper: inert to touch so an owning ancestor keeps the press.
+  decorative: { pointerEvents: "none" },
+  track: {
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    variants: {
+      shape: {
+        "ios-sm": trackStyle(theme, "ios", "sm"),
+        "ios-md": trackStyle(theme, "ios", "md"),
+        "android-sm": trackStyle(theme, "android", "sm"),
+        "android-md": trackStyle(theme, "android", "md")
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  // The Android knob overhangs its track, so it is centred out of flow.
+  knobSlot: {
+    justifyContent: "center",
+    variants: {
+      shape: {
+        "ios-sm": {},
+        "ios-md": {},
+        "android-sm": { position: "absolute", start: 0 },
+        "android-md": { position: "absolute", start: 0 }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  // Centre the pending spinner inside the knob disc.
+  knobBusy: { alignItems: "center", justifyContent: "center" },
+  // The spinner is decorative — inert to touch so the knob keeps the press.
+  spinner: { pointerEvents: "none" },
+  knob: {
+    borderRadius: theme.radius.full,
+    variants: {
+      shape: {
+        "ios-sm": knobStyle(theme, "ios", "sm"),
+        "ios-md": knobStyle(theme, "ios", "md"),
+        "android-sm": knobStyle(theme, "android", "sm"),
+        "android-md": knobStyle(theme, "android", "md")
+      },
+      disabled: { true: {}, false: {} }
+    }
+  }
+}));
+
+export { Switch };

package/dist/chunk-YIJ55TBC.js

@@ -0,0 +1 @@
+

package/dist/chunk-YKZ4RZZF.js

@@ -0,0 +1 @@
+

package/dist/chunk-YLLCXTMC.js

@@ -0,0 +1,37 @@
+// src/progress/node-model.ts
+var NODE_STATE_ICON = {
+  working: "loader",
+  waiting: "clock",
+  done: "check",
+  crashed: "alert-triangle",
+  conflict: "alert-circle",
+  pending: "circle"
+};
+var NODE_STATE_WORD = {
+  working: "working",
+  waiting: "waiting",
+  done: "done",
+  crashed: "crashed",
+  conflict: "conflict",
+  pending: "pending"
+};
+var NODE_STATE_SHAPE = {
+  working: "round",
+  done: "round",
+  pending: "round",
+  waiting: "square",
+  crashed: "square",
+  conflict: "square"
+};
+function isConnectorTraversed(state) {
+  return state === "done";
+}
+function resolveStepState(index, current, states) {
+  const override = states?.[index];
+  if (override) return override;
+  if (index < current) return "done";
+  if (index === current) return "working";
+  return "pending";
+}
+
+export { NODE_STATE_ICON, NODE_STATE_SHAPE, NODE_STATE_WORD, isConnectorTraversed, resolveStepState };

package/dist/chunk-YTA74UZR.js

@@ -0,0 +1 @@
+