@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/src/ai/code-block/highlight.ts

@@ -0,0 +1,195 @@
+// Tiny single-pass tokenizer for ts/js/json/bash/go/sql. Concatenating every token's text
+// always gives back the input, so the renderer never loses or invents characters.
+
+export type TokenType =
+  | "plain"
+  | "keyword"
+  | "string"
+  | "comment"
+  | "number"
+  | "function"
+  | "type"
+  | "property"
+  | "variable"
+  | "punctuation";
+
+export interface Token {
+  type: TokenType;
+  text: string;
+}
+
+export type Language = "ts" | "js" | "json" | "bash" | "go" | "sql";
+
+const ALIASES: Record<string, Language> = {
+  ts: "ts",
+  typescript: "ts",
+  tsx: "ts",
+  js: "js",
+  javascript: "js",
+  jsx: "js",
+  mjs: "js",
+  json: "json",
+  jsonc: "json",
+  bash: "bash",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  go: "go",
+  golang: "go",
+  sql: "sql",
+};
+
+/** Maps a fence label (`typescript`, `sh`…) to a supported language, or null. */
+export function resolveLanguage(label: string | undefined): Language | null {
+  return ALIASES[(label ?? "").trim().toLowerCase()] ?? null;
+}
+
+const words = (list: string) => new Set(list.split(" "));
+
+const JS_KEYWORDS = words(
+  "as async await break case catch class const continue debugger default delete do else enum export extends finally for from function if implements import in instanceof interface let new of private protected public readonly return static super switch this throw try type typeof var void while with yield true false null undefined",
+);
+
+interface Spec {
+  line: string[];
+  block: [string, string] | null;
+  quotes: string;
+  keywords: Set<string>;
+  ignoreCase: boolean;
+}
+
+const SPECS: Record<Exclude<Language, "json">, Spec> = {
+  ts: {
+    line: ["//"],
+    block: ["/*", "*/"],
+    quotes: "'\"`",
+    keywords: JS_KEYWORDS,
+    ignoreCase: false,
+  },
+  js: {
+    line: ["//"],
+    block: ["/*", "*/"],
+    quotes: "'\"`",
+    keywords: JS_KEYWORDS,
+    ignoreCase: false,
+  },
+  go: {
+    line: ["//"],
+    block: ["/*", "*/"],
+    quotes: "'\"`",
+    keywords: words(
+      "break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var true false nil",
+    ),
+    ignoreCase: false,
+  },
+  bash: {
+    line: ["#"],
+    block: null,
+    quotes: "'\"",
+    keywords: words(
+      "if then else elif fi for while until do done case esac in function select return export local readonly echo cd exit set unset source alias",
+    ),
+    ignoreCase: false,
+  },
+  sql: {
+    line: ["--"],
+    block: ["/*", "*/"],
+    quotes: "'\"",
+    keywords: words(
+      "select from where and or not in is null as join left right inner outer full cross on group by order having limit offset insert into values update set delete create table alter drop index primary key foreign references unique default distinct union all case when then else end like between exists count sum avg min max asc desc with returning true false",
+    ),
+    ignoreCase: true,
+  },
+};
+
+const IDENT_START = /[A-Za-z_$]/;
+const IDENT = /[\w$]/;
+const NUMBER = /^(?:0[xX][\da-fA-F_]+|\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?)/;
+
+function push(tokens: Token[], type: TokenType, text: string) {
+  if (!text) return;
+  const last = tokens[tokens.length - 1];
+  if (last && last.type === type && (type === "plain" || type === "punctuation")) last.text += text;
+  else tokens.push({ type, text });
+}
+
+function readString(code: string, start: number, quote: string): number {
+  let i = start + 1;
+  while (i < code.length) {
+    const ch = code[i];
+    if (ch === "\\") i += 2;
+    else if (ch === quote) return i + 1;
+    else if (ch === "\n" && quote !== "`") return i;
+    else i += 1;
+  }
+  return code.length;
+}
+
+export function tokenize(code: string, language: string | undefined): Token[] {
+  const lang = resolveLanguage(language);
+  if (!lang) return [{ type: "plain", text: code }];
+  const json = lang === "json";
+  const spec = json ? SPECS.js : SPECS[lang as Exclude<Language, "json">];
+  const quotes = json ? '"' : spec.quotes;
+  const tokens: Token[] = [];
+  let i = 0;
+  while (i < code.length) {
+    const ch = code[i] as string;
+    const lineMark = spec.line.find((mark) => code.startsWith(mark, i));
+    if (lineMark) {
+      const end = code.indexOf("\n", i);
+      const stop = end === -1 ? code.length : end;
+      push(tokens, "comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    if (spec.block && code.startsWith(spec.block[0], i)) {
+      const end = code.indexOf(spec.block[1], i + 2);
+      const stop = end === -1 ? code.length : end + spec.block[1].length;
+      push(tokens, "comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    if (quotes.includes(ch)) {
+      const stop = readString(code, i, ch);
+      const isKey = json && /^\s*:/.test(code.slice(stop, stop + 40));
+      push(tokens, isKey ? "property" : "string", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    if (lang === "bash" && ch === "$") {
+      const match = /^\$(?:\{[^}]*\}|\w+|[?!#@*$])/.exec(code.slice(i));
+      if (match) {
+        push(tokens, "variable", match[0]);
+        i += match[0].length;
+        continue;
+      }
+    }
+    const signed = json && ch === "-" && /\d/.test(code[i + 1] ?? "");
+    if (/\d/.test(ch) || signed) {
+      const sign = signed ? "-" : "";
+      const match = NUMBER.exec(code.slice(i + sign.length));
+      if (match) {
+        push(tokens, "number", sign + match[0]);
+        i += sign.length + match[0].length;
+        continue;
+      }
+    }
+    if (IDENT_START.test(ch)) {
+      let stop = i + 1;
+      while (stop < code.length && IDENT.test(code[stop] as string)) stop += 1;
+      const word = code.slice(i, stop);
+      const key = spec.ignoreCase ? word.toLowerCase() : word;
+      let type: TokenType = "plain";
+      if (spec.keywords.has(key)) type = "keyword";
+      else if (/^[A-Z]/.test(word) && !json && lang !== "sql" && lang !== "bash") type = "type";
+      else if (code[stop] === "(" && lang !== "sql") type = "function";
+      push(tokens, type, word);
+      i = stop;
+      continue;
+    }
+    push(tokens, /[{}()[\];,.:<>=+\-*/%!&|?^~@]/.test(ch) ? "punctuation" : "plain", ch);
+    i += 1;
+  }
+  return tokens;
+}

package/src/ai/code-block/index.ts

@@ -0,0 +1,8 @@
+export * from "./code-block.js";
+export {
+  type Language,
+  resolveLanguage,
+  type Token,
+  type TokenType,
+  tokenize,
+} from "./highlight.js";

package/src/ai/conversation/conversation.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { ArrowDown } from "lucide-react";
+import { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import { nextStuck, showJumpToLatest } from "./stick.js";
+
+export interface ConversationProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+  /** Accessible name of the message log. */
+  label?: string;
+  /** Label of the "jump to latest" button. */
+  jumpLabel?: string;
+}
+
+/**
+ * Scrollable message log that sticks to the bottom while new content streams in. Scrolling up
+ * pauses the follow behavior and reveals a "jump to latest" button. Fills its parent's height.
+ */
+export function Conversation({
+  label = "Conversación",
+  jumpLabel = "Ir al último mensaje",
+  className,
+  children,
+  ...props
+}: ConversationProps) {
+  const scroller = useRef<HTMLDivElement>(null);
+  const content = useRef<HTMLDivElement>(null);
+  const stuck = useRef(true);
+  const lastTop = useRef(0);
+  const [jump, setJump] = useState(false);
+  const reduced = usePrefersReducedMotion();
+
+  const toBottom = useCallback((smooth: boolean) => {
+    const el = scroller.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: smooth ? "smooth" : "auto" });
+  }, []);
+
+  const onScroll = useCallback(() => {
+    const el = scroller.current;
+    if (!el) return;
+    stuck.current = nextStuck(stuck.current, el, lastTop.current);
+    lastTop.current = el.scrollTop;
+    setJump(showJumpToLatest(stuck.current, el));
+  }, []);
+
+  useEffect(() => {
+    const inner = content.current;
+    if (!inner) return;
+    toBottom(false);
+    const observer = new ResizeObserver(() => {
+      if (stuck.current) toBottom(false);
+      else if (scroller.current) setJump(showJumpToLatest(false, scroller.current));
+    });
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, [toBottom]);
+
+  return (
+    <div
+      className={cn("@container/conversation relative h-full min-h-0 min-w-0", className)}
+      {...props}
+    >
+      <div
+        ref={scroller}
+        role="log"
+        aria-label={label}
+        aria-live="polite"
+        aria-relevant="additions text"
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable log must be keyboard reachable
+        tabIndex={0}
+        onScroll={onScroll}
+        className="h-full overflow-y-auto overscroll-contain focus-visible:focus-ring"
+      >
+        <div ref={content} className="mx-auto grid w-full max-w-3xl gap-density-lg p-card">
+          {children}
+        </div>
+      </div>
+      {jump ? (
+        <button
+          type="button"
+          aria-label={jumpLabel}
+          onClick={() => {
+            stuck.current = true;
+            setJump(false);
+            toBottom(!reduced);
+          }}
+          className="absolute bottom-3 left-1/2 inline-flex h-control-sm -translate-x-1/2 cursor-pointer items-center gap-1.5 rounded-button bg-surface-overlay px-3 text-meta text-ink shadow-overlay border-control surface-overlay pressable focus-visible:focus-ring"
+        >
+          <ArrowDown aria-hidden className="size-3.5" />
+          <span className="truncate">Más reciente</span>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/ai/conversation/index.ts

@@ -0,0 +1,9 @@
+export * from "./conversation.js";
+export {
+  distanceFromBottom,
+  isNearBottom,
+  nextStuck,
+  type ScrollMetrics,
+  STICK_THRESHOLD,
+  showJumpToLatest,
+} from "./stick.js";

package/src/ai/conversation/stick.ts

@@ -0,0 +1,40 @@
+// Pure decisions behind the stick-to-bottom scroll behavior of <Conversation>.
+
+export interface ScrollMetrics {
+  scrollTop: number;
+  scrollHeight: number;
+  clientHeight: number;
+}
+
+/** Distance in px from the bottom that still counts as "at the bottom". */
+export const STICK_THRESHOLD = 48;
+
+/** Distance in px (never negative) between the viewport bottom and the content bottom. */
+export function distanceFromBottom(m: ScrollMetrics): number {
+  return Math.max(0, m.scrollHeight - m.scrollTop - m.clientHeight);
+}
+
+export function isNearBottom(m: ScrollMetrics, threshold = STICK_THRESHOLD): boolean {
+  return distanceFromBottom(m) <= threshold;
+}
+
+/**
+ * Next "stuck to bottom" state after a scroll event. Reaching the bottom sticks; scrolling up
+ * unsticks; a scroll event with no upward movement (content grew under a stuck viewport) keeps
+ * the previous state so streaming text never drops the lock by itself.
+ */
+export function nextStuck(
+  prevStuck: boolean,
+  metrics: ScrollMetrics,
+  prevScrollTop: number,
+  threshold = STICK_THRESHOLD,
+): boolean {
+  if (isNearBottom(metrics, threshold)) return true;
+  if (metrics.scrollTop < prevScrollTop) return false;
+  return prevStuck;
+}
+
+/** The "jump to latest" button shows only when the user left the bottom. */
+export function showJumpToLatest(stuck: boolean, metrics: ScrollMetrics): boolean {
+  return !stuck && !isNearBottom(metrics);
+}

package/src/ai/index.ts

@@ -0,0 +1,14 @@
+export * from "./attachment/index.js";
+export * from "./chain-of-thought/index.js";
+export * from "./chat-list/index.js";
+export * from "./chat-message/index.js";
+export * from "./code-block/index.js";
+export * from "./conversation/index.js";
+export * from "./loader/index.js";
+export * from "./markdown/index.js";
+export * from "./message-actions/index.js";
+export * from "./prompt-input/index.js";
+export * from "./prompt-suggestion/index.js";
+export * from "./source/index.js";
+export * from "./text-shimmer/index.js";
+export * from "./tool-call/index.js";

package/src/ai/internal/disclosure.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { type ReactNode, useId, useState } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface DisclosureProps {
+  /** Always-visible header content (icon, title, status). */
+  header: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  panelClassName?: string;
+}
+
+/** Header button + animated panel. Closed content is `inert`, so it leaves the tab order. */
+export function Disclosure({
+  header,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  panelClassName,
+}: DisclosureProps) {
+  const [state, setState] = useState(defaultOpen);
+  const open = openProp ?? state;
+  const panelId = useId();
+  const toggle = () => {
+    if (openProp === undefined) setState(!open);
+    onOpenChange?.(!open);
+  };
+  return (
+    <div className={cn("min-w-0", className)}>
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={toggle}
+        className="flex w-full min-w-0 cursor-pointer items-center gap-density-sm rounded-button text-left focus-visible:focus-ring"
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-density-sm">{header}</span>
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "size-4 shrink-0 text-ink-3 transition-transform duration-(--motion-duration) ease-style",
+            open && "rotate-180",
+          )}
+        />
+      </button>
+      <div
+        id={panelId}
+        inert={!open}
+        className={cn(
+          "grid transition-[grid-template-rows] duration-(--motion-duration) ease-style",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        )}
+      >
+        <div className={cn("min-h-0 overflow-hidden", panelClassName)}>{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/ai/internal/icon-action.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface IconActionProps extends ComponentPropsWithoutRef<"button"> {
+  /** Accessible name; the icon alone carries no text. */
+  label: string;
+}
+
+/** Square ghost icon button used by the AI set (copy, regenerate, remove…). */
+export function IconAction({ label, className, children, ...props }: IconActionProps) {
+  return (
+    <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}
+    </button>
+  );
+}

package/src/ai/internal/keyframes.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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 function AiKeyframes() {
+  return (
+    <style href="jcsoftdev-ui-ai-keyframes" precedence="default">
+      {
+        "@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}}"
+      }
+    </style>
+  );
+}

package/src/ai/internal/use-copy.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/** Copies text to the clipboard (with a textarea fallback) and flags success for `resetMs`. */
+export function useCopy(resetMs = 1600) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<number | undefined>(undefined);
+
+  useEffect(() => () => window.clearTimeout(timer.current), []);
+
+  const copy = useCallback(
+    async (text: string) => {
+      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 };
+}

package/src/ai/loader/index.ts

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

package/src/ai/loader/loader.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import { AiKeyframes } from "../internal/keyframes.js";
+
+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;
+}
+
+const dotSize: Record<LoaderSize, string> = { sm: "size-1", md: "size-1.5" };
+
+/** Animated waiting indicator. With reduced motion the dots stay still. */
+export function Loader({
+  variant = "dots",
+  size = "md",
+  label = "Escribiendo…",
+  className,
+}: LoaderProps) {
+  const reduced = usePrefersReducedMotion();
+  const dots = (
+    <span aria-hidden className="inline-flex items-center gap-1">
+      {[0, 1, 2].map((n) => (
+        <span
+          key={n}
+          className={cn("rounded-full bg-current opacity-60", dotSize[size])}
+          style={
+            reduced
+              ? undefined
+              : { animation: "ui-ai-dot 1.2s ease-in-out infinite", animationDelay: `${n * 160}ms` }
+          }
+        />
+      ))}
+    </span>
+  );
+
+  return (
+    <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,
+      )}
+    >
+      <AiKeyframes />
+      {dots}
+      {variant === "typing" ? <span>{label}</span> : <span className="sr-only">{label}</span>}
+    </span>
+  );
+}

package/src/ai/markdown/index.ts

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