@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/ai/internal/icon-action.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function IconAction({ label, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      className: cn(
+        "inline-grid size-7 shrink-0 cursor-pointer place-items-center rounded-button text-ink-3 pressable hover:bg-surface-2 hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-45 aria-pressed:bg-accent-soft aria-pressed:text-accent-ink [&_svg]:size-3.5",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  IconAction
+};

package/dist/ai/internal/keyframes.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Keyframes used by the AI set. React 19 hoists and dedupes `<style href precedence>`, so
+ * rendering this from several components injects the rules once and needs no stylesheet entry.
+ */
+export declare function AiKeyframes(): import("react").JSX.Element;

package/dist/ai/internal/keyframes.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+function AiKeyframes() {
+  return /* @__PURE__ */ jsx("style", { href: "jcsoftdev-ui-ai-keyframes", precedence: "default", children: "@keyframes ui-ai-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-25%)}}@keyframes ui-ai-caret{50%{opacity:0}}@keyframes ui-ai-shimmer{from{background-position:120% 0}to{background-position:-20% 0}}" });
+}
+export {
+  AiKeyframes
+};

package/dist/ai/internal/use-copy.d.ts

@@ -0,0 +1,5 @@
+/** Copies text to the clipboard (with a textarea fallback) and flags success for `resetMs`. */
+export declare function useCopy(resetMs?: number): {
+    copied: boolean;
+    copy: (text: string) => Promise<void>;
+};

package/dist/ai/internal/use-copy.js

@@ -0,0 +1,35 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useCopy(resetMs = 1600) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(void 0);
+  useEffect(() => () => window.clearTimeout(timer.current), []);
+  const copy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        const area = document.createElement("textarea");
+        area.value = text;
+        area.setAttribute("readonly", "");
+        area.style.position = "fixed";
+        area.style.opacity = "0";
+        document.body.append(area);
+        area.select();
+        try {
+          document.execCommand("copy");
+        } finally {
+          area.remove();
+        }
+      }
+      setCopied(true);
+      window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => setCopied(false), resetMs);
+    },
+    [resetMs]
+  );
+  return { copied, copy };
+}
+export {
+  useCopy
+};

package/dist/ai/loader/index.d.ts

@@ -0,0 +1 @@
+export * from "./loader.js";

package/dist/ai/loader/index.js

@@ -0,0 +1 @@
+export * from "./loader.js";

package/dist/ai/loader/loader.d.ts

@@ -0,0 +1,12 @@
+export type LoaderVariant = "dots" | "typing";
+export type LoaderSize = "sm" | "md";
+export interface LoaderProps {
+    /** `dots` is the bare indicator; `typing` wraps it in a bubble with a label. */
+    variant?: LoaderVariant;
+    size?: LoaderSize;
+    /** Spoken label (`role="status"`); shown as text in the `typing` variant. */
+    label?: string;
+    className?: string;
+}
+/** Animated waiting indicator. With reduced motion the dots stay still. */
+export declare function Loader({ variant, size, label, className, }: LoaderProps): import("react").JSX.Element;

package/dist/ai/loader/loader.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import { AiKeyframes } from "../internal/keyframes.js";
+const dotSize = { sm: "size-1", md: "size-1.5" };
+function Loader({
+  variant = "dots",
+  size = "md",
+  label = "Escribiendo\u2026",
+  className
+}) {
+  const reduced = usePrefersReducedMotion();
+  const dots = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex items-center gap-1", children: [0, 1, 2].map((n) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("rounded-full bg-current opacity-60", dotSize[size]),
+      style: reduced ? void 0 : { animation: "ui-ai-dot 1.2s ease-in-out infinite", animationDelay: `${n * 160}ms` }
+    },
+    n
+  )) });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      className: cn(
+        "inline-flex items-center gap-density-sm text-ink-3",
+        variant === "typing" && "rounded-card bg-surface-card px-control-x py-2 text-meta shadow-card border-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(AiKeyframes, {}),
+        dots,
+        variant === "typing" ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+export {
+  Loader
+};

package/dist/ai/markdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./markdown.js";
+export { type Block, type Inline, parseMarkdown, safeHref } from "./parse.js";

package/dist/ai/markdown/index.js

@@ -0,0 +1,6 @@
+export * from "./markdown.js";
+import { parseMarkdown, safeHref } from "./parse.js";
+export {
+  parseMarkdown,
+  safeHref
+};

package/dist/ai/markdown/markdown.d.ts

@@ -0,0 +1,12 @@
+export interface MarkdownProps {
+    /** Markdown source. Raw HTML is shown as text; only http, https and mailto links are active. */
+    children: string;
+    /** Shows a blinking caret after the last character, for streaming answers. */
+    streaming?: boolean;
+    className?: string;
+}
+/**
+ * Safe Markdown renderer: headings, lists, emphasis, inline code, code fences, quotes, tables
+ * and links. It builds React elements from a parsed AST, so no input ever reaches innerHTML.
+ */
+export declare function Markdown({ children, streaming, className }: MarkdownProps): import("react").JSX.Element;

package/dist/ai/markdown/markdown.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../../utils/cn.js";
+import { CodeBlock } from "../code-block/code-block.js";
+import { AiKeyframes } from "../internal/keyframes.js";
+import { parseMarkdown } from "./parse.js";
+function Caret() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] bg-current",
+      style: { animation: "ui-ai-caret 1s steps(1) infinite" }
+    }
+  );
+}
+function renderInline(nodes) {
+  return nodes.map((node, index) => {
+    const key = index;
+    switch (node.t) {
+      case "text":
+        return /* @__PURE__ */ jsx(Fragment, { children: node.v }, key);
+      case "br":
+        return /* @__PURE__ */ jsx("br", {}, key);
+      case "code":
+        return /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "rounded-badge bg-surface-sunken px-1 py-0.5 font-mono text-[0.9em]",
+            children: node.v
+          },
+          key
+        );
+      case "strong":
+        return /* @__PURE__ */ jsx("strong", { children: renderInline(node.c) }, key);
+      case "em":
+        return /* @__PURE__ */ jsx("em", { children: renderInline(node.c) }, key);
+      case "link":
+        return node.href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: node.href,
+            target: "_blank",
+            rel: "noopener noreferrer nofollow",
+            className: "text-accent-ink underline underline-offset-2 focus-visible:focus-ring",
+            children: renderInline(node.c)
+          },
+          key
+        ) : /* @__PURE__ */ jsx("span", { children: renderInline(node.c) }, key);
+      default:
+        return null;
+    }
+  });
+}
+const HEADINGS = {
+  1: "text-card-title font-bold",
+  2: "text-row-title font-bold",
+  3: "text-body font-bold",
+  4: "text-body font-semibold",
+  5: "text-meta font-semibold uppercase",
+  6: "text-meta font-semibold text-ink-2"
+};
+const ALIGN = { left: "text-left", center: "text-center", right: "text-right" };
+function renderBlock(block, key, caret) {
+  const tail = caret ? /* @__PURE__ */ jsx(Caret, {}) : null;
+  switch (block.t) {
+    case "heading": {
+      const Tag = `h${block.level}`;
+      return /* @__PURE__ */ jsxs(Tag, { className: HEADINGS[block.level], children: [
+        renderInline(block.c),
+        tail
+      ] }, key);
+    }
+    case "p":
+      return /* @__PURE__ */ jsxs("p", { children: [
+        renderInline(block.c),
+        tail
+      ] }, key);
+    case "list": {
+      const Tag = block.ordered ? "ol" : "ul";
+      return /* @__PURE__ */ jsx(
+        Tag,
+        {
+          start: block.ordered && block.start !== 1 ? block.start : void 0,
+          className: cn("grid gap-1 pl-5", block.ordered ? "list-decimal" : "list-disc"),
+          children: block.items.map((item, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: list items are positional
+            /* @__PURE__ */ jsxs("li", { className: "pl-1", children: [
+              renderInline(item.c),
+              caret && index === block.items.length - 1 && item.children.length === 0 ? /* @__PURE__ */ jsx(Caret, {}) : null,
+              item.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 grid gap-1", children: renderBlocks(item.children, caret && index === block.items.length - 1) }) : null
+            ] }, index)
+          ))
+        },
+        key
+      );
+    }
+    case "code":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CodeBlock, { code: block.v, language: block.lang }),
+        tail
+      ] }, key);
+    case "quote":
+      return /* @__PURE__ */ jsx("blockquote", { className: "grid gap-2 border-l-2 border-accent-line pl-3 text-ink-2", children: renderBlocks(block.c, caret) }, key);
+    case "hr":
+      return /* @__PURE__ */ jsx("hr", { className: "border-0 border-t-divider" }, key);
+    case "table":
+      return /* @__PURE__ */ jsx("div", { className: "max-w-full overflow-x-auto rounded-card border-card shadow-card", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-meta", children: [
+        /* @__PURE__ */ jsx("thead", { className: "bg-surface-sunken", children: /* @__PURE__ */ jsx("tr", { children: block.head.map((cell, col) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            className: cn(
+              "px-3 py-1.5 font-semibold",
+              block.align[col] ? ALIGN[block.align[col]] : "text-left"
+            ),
+            children: renderInline(cell)
+          },
+          col
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, r) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: rows are positional
+          /* @__PURE__ */ jsx("tr", { className: "border-t-divider", children: row.map((cell, col) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn(
+                "px-3 py-1.5",
+                block.align[col] ? ALIGN[block.align[col]] : "text-left"
+              ),
+              children: renderInline(cell)
+            },
+            col
+          )) }, r)
+        )) })
+      ] }) }, key);
+  }
+}
+function renderBlocks(blocks, caret) {
+  return blocks.map(
+    (block, index) => renderBlock(block, index, caret && index === blocks.length - 1)
+  );
+}
+function Markdown({ children, streaming, className }) {
+  const blocks = parseMarkdown(children);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("grid min-w-0 gap-density break-words text-body leading-relaxed", className),
+      children: [
+        streaming ? /* @__PURE__ */ jsx(AiKeyframes, {}) : null,
+        renderBlocks(blocks, Boolean(streaming)),
+        streaming && blocks.length === 0 ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Caret, {}) }) : null
+      ]
+    }
+  );
+}
+export {
+  Markdown
+};

package/dist/ai/markdown/parse.d.ts

@@ -0,0 +1,56 @@
+export type Inline = {
+    t: "text";
+    v: string;
+} | {
+    t: "code";
+    v: string;
+} | {
+    t: "strong";
+    c: Inline[];
+} | {
+    t: "em";
+    c: Inline[];
+} | {
+    t: "link";
+    href: string | null;
+    c: Inline[];
+} | {
+    t: "br";
+};
+export type TableAlign = "left" | "center" | "right" | null;
+export interface ListItem {
+    c: Inline[];
+    children: Block[];
+}
+export type Block = {
+    t: "heading";
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    c: Inline[];
+} | {
+    t: "p";
+    c: Inline[];
+} | {
+    t: "list";
+    ordered: boolean;
+    start: number;
+    items: ListItem[];
+} | {
+    t: "code";
+    lang: string;
+    v: string;
+} | {
+    t: "quote";
+    c: Block[];
+} | {
+    t: "hr";
+} | {
+    t: "table";
+    align: TableAlign[];
+    head: Inline[][];
+    rows: Inline[][][];
+};
+/** Returns the normalized URL when its protocol is http, https or mailto; otherwise null. */
+export declare function safeHref(raw: string): string | null;
+export declare function parseInline(src: string): Inline[];
+/** Parses Markdown into blocks. An unclosed code fence runs to the end (streaming friendly). */
+export declare function parseMarkdown(src: string): Block[];

package/dist/ai/markdown/parse.js

@@ -0,0 +1,229 @@
+const SAFE_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:"]);
+function safeHref(raw) {
+  const value = raw.trim();
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return SAFE_PROTOCOLS.has(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+const ESCAPABLE = /[\\`*_[\]()#+\-.!|>~]/;
+function closingParen(src, from) {
+  let depth = 0;
+  for (let i = from; i < src.length; i += 1) {
+    if (src[i] === "(") depth += 1;
+    else if (src[i] === ")") {
+      if (depth === 0) return i;
+      depth -= 1;
+    }
+  }
+  return -1;
+}
+function parseInline(src) {
+  const out = [];
+  let buf = "";
+  const flush = () => {
+    if (buf) out.push({ t: "text", v: buf });
+    buf = "";
+  };
+  let i = 0;
+  while (i < src.length) {
+    const ch = src[i];
+    const next = src[i + 1];
+    if (ch === "\\" && next !== void 0 && ESCAPABLE.test(next)) {
+      buf += next;
+      i += 2;
+      continue;
+    }
+    if (ch === "`") {
+      const end = src.indexOf("`", i + 1);
+      if (end > i + 1) {
+        flush();
+        out.push({ t: "code", v: src.slice(i + 1, end) });
+        i = end + 1;
+        continue;
+      }
+    }
+    if (src.startsWith("**", i) || src.startsWith("__", i)) {
+      const mark = src.slice(i, i + 2);
+      const end = src.indexOf(mark, i + 2);
+      if (end > i + 2) {
+        flush();
+        out.push({ t: "strong", c: parseInline(src.slice(i + 2, end)) });
+        i = end + 2;
+        continue;
+      }
+    }
+    if (ch === "*" || ch === "_") {
+      const end = src.indexOf(ch, i + 1);
+      const intraword = ch === "_" && i > 0 && /\w/.test(src[i - 1]);
+      if (end > i + 1 && !intraword && !/\s/.test(src[i + 1]) && !/\s/.test(src[end - 1])) {
+        flush();
+        out.push({ t: "em", c: parseInline(src.slice(i + 1, end)) });
+        i = end + 1;
+        continue;
+      }
+    }
+    if (ch === "[") {
+      const mid = src.indexOf("](", i + 1);
+      const end = mid > i ? closingParen(src, mid + 2) : -1;
+      if (end > mid) {
+        flush();
+        out.push({
+          t: "link",
+          href: safeHref(src.slice(mid + 2, end)),
+          c: parseInline(src.slice(i + 1, mid))
+        });
+        i = end + 1;
+        continue;
+      }
+    }
+    if (ch === "\n") {
+      buf = buf.replace(/ +$/, "");
+      flush();
+      out.push({ t: "br" });
+      i += 1;
+      continue;
+    }
+    buf += ch;
+    i += 1;
+  }
+  flush();
+  return out;
+}
+const FENCE = /^\s{0,3}(`{3,}|~{3,})\s*([\w+#.-]*)/;
+const HEADING = /^\s{0,3}(#{1,6})\s+(.*?)(?:\s+#+)?\s*$/;
+const HR = /^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/;
+const ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+const TABLE_RULE = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
+function splitRow(line) {
+  let row = line.trim();
+  if (row.startsWith("|")) row = row.slice(1);
+  if (row.endsWith("|") && !row.endsWith("\\|")) row = row.slice(0, -1);
+  return row.split(/(?<!\\)\|/).map((cell) => cell.trim().replace(/\\\|/g, "|"));
+}
+function alignOf(cell) {
+  const left = cell.startsWith(":");
+  const right = cell.endsWith(":");
+  if (left && right) return "center";
+  if (right) return "right";
+  return left ? "left" : null;
+}
+function isTableStart(line, next) {
+  return line.includes("|") && !!next?.includes("-") && TABLE_RULE.test(next);
+}
+function startsBlock(line, next) {
+  return FENCE.test(line) || HEADING.test(line) || HR.test(line) || ITEM.test(line) || /^\s{0,3}>/.test(line) || isTableStart(line, next);
+}
+function parseMarkdown(src) {
+  const lines = src.replace(/\r\n?/g, "\n").split("\n");
+  const at = (n) => lines[n];
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = at(i);
+    if (!line.trim()) {
+      i += 1;
+      continue;
+    }
+    const fence = FENCE.exec(line);
+    if (fence) {
+      const marker = fence[1].startsWith("`") ? "`" : "~";
+      const size = fence[1].length;
+      const closer = new RegExp(`^\\s{0,3}${marker}{${size},}\\s*$`);
+      const body = [];
+      i += 1;
+      while (i < lines.length && !closer.test(at(i))) {
+        body.push(at(i));
+        i += 1;
+      }
+      i += 1;
+      blocks.push({ t: "code", lang: fence[2] ?? "", v: body.join("\n") });
+      continue;
+    }
+    const heading = HEADING.exec(line);
+    if (heading) {
+      blocks.push({
+        t: "heading",
+        level: heading[1].length,
+        c: parseInline(heading[2])
+      });
+      i += 1;
+      continue;
+    }
+    if (HR.test(line)) {
+      blocks.push({ t: "hr" });
+      i += 1;
+      continue;
+    }
+    if (/^\s{0,3}>/.test(line)) {
+      const body = [];
+      while (i < lines.length && /^\s{0,3}>/.test(at(i))) {
+        body.push(at(i).replace(/^\s{0,3}>\s?/, ""));
+        i += 1;
+      }
+      blocks.push({ t: "quote", c: parseMarkdown(body.join("\n")) });
+      continue;
+    }
+    if (isTableStart(line, lines[i + 1])) {
+      const head = splitRow(line);
+      const align = splitRow(at(i + 1)).map(alignOf);
+      const rows = [];
+      i += 2;
+      while (i < lines.length && at(i).trim() && at(i).includes("|")) {
+        const cells = splitRow(at(i));
+        rows.push(head.map((_, col) => parseInline(cells[col] ?? "")));
+        i += 1;
+      }
+      blocks.push({
+        t: "table",
+        align: head.map((_, col) => align[col] ?? null),
+        head: head.map((cell) => parseInline(cell)),
+        rows
+      });
+      continue;
+    }
+    const item = ITEM.exec(line);
+    if (item) {
+      const ordered = /\d/.test(item[2]);
+      const start = ordered ? Number.parseInt(item[2], 10) : 1;
+      const baseIndent = item[1].length;
+      const items = [];
+      while (i < lines.length) {
+        const current = ITEM.exec(at(i));
+        if (!current || current[1].length > baseIndent + 1) break;
+        if (/\d/.test(current[2]) !== ordered) break;
+        const sub = [];
+        i += 1;
+        while (i < lines.length) {
+          const l = at(i);
+          const indent = /^\s*/.exec(l)[0].length;
+          if (!l.trim() || indent <= baseIndent + 1) break;
+          sub.push(l.slice(Math.min(indent, baseIndent + 2)));
+          i += 1;
+        }
+        items.push({
+          c: parseInline(current[3]),
+          children: parseMarkdown(sub.join("\n"))
+        });
+      }
+      blocks.push({ t: "list", ordered, start, items });
+      continue;
+    }
+    const para = [line.trim()];
+    i += 1;
+    while (i < lines.length && at(i).trim() && !startsBlock(at(i), lines[i + 1])) {
+      para.push(at(i).trim());
+      i += 1;
+    }
+    blocks.push({ t: "p", c: parseInline(para.join("\n")) });
+  }
+  return blocks;
+}
+export {
+  parseInline,
+  parseMarkdown,
+  safeHref
+};

package/dist/ai/message-actions/index.d.ts

@@ -0,0 +1 @@
+export * from "./message-actions.js";

package/dist/ai/message-actions/index.js

@@ -0,0 +1 @@
+export * from "./message-actions.js";

package/dist/ai/message-actions/message-actions.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from "react";
+export type MessageFeedback = "like" | "dislike" | null;
+export interface MessageActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "onCopy"> {
+    /** Text copied by the copy button. */
+    text: string;
+    onCopy?: (text: string) => void;
+    /** Omit to hide the regenerate button. */
+    onRegenerate?: () => void;
+    /** Omit to hide the like/dislike buttons. */
+    onFeedback?: (value: MessageFeedback) => void;
+    feedback?: MessageFeedback;
+    defaultFeedback?: MessageFeedback;
+}
+/** Copy, regenerate, like and dislike for an assistant message. Feedback toggles off on re-press. */
+export declare function MessageActions({ text, onCopy, onRegenerate, onFeedback, feedback: feedbackProp, defaultFeedback, className, ...props }: MessageActionsProps): import("react").JSX.Element;