@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/base/ui/dot-matrix.tsx

@@ -0,0 +1,267 @@
+import type { ComponentProps, CSSProperties } from "react";
+import { cn } from "../../../../../lib/utils";
+
+const GRID = 5;
+const CENTER = (GRID - 1) / 2;
+const DOT_INDEXES = Array.from({ length: GRID * GRID }, (_, i) => i);
+
+/* Deterministic bit-mixing hash so server and client render identical markup; takes a range in milliseconds and returns seconds. A plain (i * prime) % range correlates indexes a grid-stride apart and renders as column-synchronized waves instead of a twinkle. */
+const hash = (n: number, salt: number, range: number) => {
+  let h = (Math.imul(n, 374761393) + Math.imul(salt, 668265263)) >>> 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177) >>> 0;
+  return ((h ^ (h >>> 16)) % range) / 1000;
+};
+
+const glyph = (dots: [number, number][]) =>
+  new Set(dots.map(([row, col]) => row * GRID + col));
+
+const CHECK = glyph([
+  [1, 4],
+  [2, 3],
+  [3, 0],
+  [3, 2],
+  [4, 1],
+]);
+const CROSS = glyph([
+  [0, 0],
+  [0, 4],
+  [1, 1],
+  [1, 3],
+  [2, 2],
+  [3, 1],
+  [3, 3],
+  [4, 0],
+  [4, 4],
+]);
+const BANG = glyph([
+  [0, 2],
+  [1, 2],
+  [2, 2],
+  [4, 2],
+]);
+const INFO = glyph([
+  [0, 2],
+  [2, 2],
+  [3, 2],
+  [4, 2],
+]);
+const PAUSE = glyph([
+  [1, 1],
+  [2, 1],
+  [3, 1],
+  [1, 3],
+  [2, 3],
+  [3, 3],
+]);
+const STOP = glyph([
+  [1, 1],
+  [1, 2],
+  [1, 3],
+  [2, 1],
+  [2, 2],
+  [2, 3],
+  [3, 1],
+  [3, 2],
+  [3, 3],
+]);
+const RECORD = glyph([
+  [1, 2],
+  [2, 1],
+  [2, 2],
+  [2, 3],
+  [3, 2],
+]);
+const ELLIPSIS = glyph([
+  [2, 0],
+  [2, 2],
+  [2, 4],
+]);
+
+type Blink = { duration: number; delay: number; lo: number };
+
+type StateConfig = {
+  /** Text color class; dots inherit the surrounding color when omitted. */
+  color?: string;
+  /** Dots that render at full opacity; all others rest at `dim`. Omit for the full grid. */
+  glyph?: Set<number>;
+  /** Resting opacity of on dots. */
+  base?: number;
+  /** Resting opacity of off dots when a glyph is set. */
+  dim?: number;
+  /** Blink parameters per on dot, keyed by index and grid position. */
+  blink?: (i: number, row: number, col: number) => Blink;
+};
+
+const STATES = {
+  idle: { color: "text-muted-foreground", base: 0.3 },
+  loading: {
+    blink: (i) => ({
+      duration: 0.9 + hash(i, 2, 700),
+      delay: -hash(i, 1, 1200),
+      lo: 0.15,
+    }),
+  },
+  thinking: {
+    blink: (_i, row, col) => ({
+      duration: 1.2,
+      delay: -(row + col) * 0.09,
+      lo: 0.2,
+    }),
+  },
+  streaming: {
+    blink: (_i, row, col) => ({
+      duration: 0.9,
+      delay: -(row * 0.12 + hash(col, 3, 900)),
+      lo: 0.15,
+    }),
+  },
+  searching: {
+    blink: (_i, _row, col) => ({ duration: 1.1, delay: -col * 0.12, lo: 0.2 }),
+  },
+  syncing: {
+    blink: (_i, row, col) => {
+      const turn =
+        (Math.atan2(row - CENTER, col - CENTER) + Math.PI) / (2 * Math.PI);
+      return { duration: 1.3, delay: -turn * 1.3, lo: 0.2 };
+    },
+  },
+  connecting: {
+    blink: (_i, row, col) => ({
+      duration: 1.4,
+      delay: -Math.max(Math.abs(row - CENTER), Math.abs(col - CENTER)) * 0.18,
+      lo: 0.15,
+    }),
+  },
+  waiting: {
+    glyph: ELLIPSIS,
+    blink: (_i, _row, col) => ({
+      duration: 1.2,
+      delay: -col * 0.09,
+      lo: 0.2,
+    }),
+  },
+  uploading: {
+    blink: (_i, row) => ({
+      duration: 1,
+      delay: -(GRID - 1 - row) * 0.12,
+      lo: 0.2,
+    }),
+  },
+  downloading: {
+    blink: (_i, row) => ({ duration: 1, delay: -row * 0.12, lo: 0.2 }),
+  },
+  listening: {
+    blink: (_i, _row, col) => ({
+      duration: 0.7 + hash(col, 4, 500),
+      delay: -hash(col, 5, 900),
+      lo: 0.25,
+    }),
+  },
+  speaking: {
+    blink: (_i, _row, col) => ({
+      duration: 0.4 + hash(col, 6, 350),
+      delay: -hash(col, 7, 700),
+      lo: 0.2,
+    }),
+  },
+  recording: {
+    color: "text-red-500",
+    glyph: RECORD,
+    dim: 0.12,
+    blink: () => ({ duration: 1.4, delay: 0, lo: 0.3 }),
+  },
+  success: { color: "text-emerald-500", glyph: CHECK },
+  error: {
+    color: "text-red-500",
+    glyph: CROSS,
+    blink: () => ({ duration: 1.1, delay: 0, lo: 0.4 }),
+  },
+  warning: {
+    color: "text-amber-500",
+    glyph: BANG,
+    blink: () => ({ duration: 1.6, delay: 0, lo: 0.45 }),
+  },
+  info: { color: "text-blue-500", glyph: INFO },
+  paused: { color: "text-muted-foreground", glyph: PAUSE },
+  stopped: { color: "text-muted-foreground", glyph: STOP },
+  offline: { color: "text-muted-foreground", base: 0.15 },
+} satisfies Record<string, StateConfig>;
+
+export type DotMatrixState = keyof typeof STATES;
+
+const dotMatrixStates = Object.keys(STATES) as readonly DotMatrixState[];
+
+export type DotMatrixProps = Omit<ComponentProps<"span">, "children"> & {
+  state?: DotMatrixState;
+  label?: string;
+};
+
+/* The blink animation runs on every dot in every state (static states set hi = lo) and the registered hi/lo custom properties carry a transition, because removing or adding an animation never triggers a CSS transition on the animated property itself; transitioning the amplitude bounds is what makes state changes cross-fade. */
+const DOT_MATRIX_CSS =
+  '@property --aui-dot-matrix-hi{syntax:"<number>";inherits:false;initial-value:1}@property --aui-dot-matrix-lo{syntax:"<number>";inherits:false;initial-value:0.15}@keyframes aui-dot-matrix-blink{0%,100%{opacity:var(--aui-dot-matrix-hi,1)}50%{opacity:var(--aui-dot-matrix-lo,0.15)}}';
+
+/**
+ * Tiny 5x5 dot-matrix status indicator with 20 built-in states. Dots inherit the text color and animate in state-specific patterns: twinkle, waves, ripples, sweeps, equalizer columns, and check/cross/bang glyphs. State changes cross-fade per dot.
+ *
+ * ```tsx
+ * <DotMatrix state={isRunning ? "loading" : "success"} />
+ * ```
+ */
+function DotMatrix({
+  className,
+  state = "loading",
+  label,
+  ...props
+}: DotMatrixProps) {
+  const config: StateConfig = STATES[state];
+  return (
+    <span
+      data-slot="dot-matrix"
+      data-state={state}
+      role="status"
+      className={cn("inline-block size-4 shrink-0", config.color, className)}
+      {...props}
+    >
+      <span className="sr-only">{label ?? state}</span>
+      {/* Hoisted and deduplicated across instances by React; must live in HTML scope, inside the SVG it would be an SVG-namespace element React does not hoist. */}
+      <style href="aui-dot-matrix" precedence="low">
+        {DOT_MATRIX_CSS}
+      </style>
+      <svg
+        aria-hidden
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        className="size-full"
+      >
+        {DOT_INDEXES.map((i) => {
+          const row = Math.floor(i / GRID);
+          const col = i % GRID;
+          const on = !config.glyph || config.glyph.has(i);
+          const hi = on ? (config.base ?? 1) : (config.dim ?? 0.15);
+          const blink = on ? config.blink?.(i, row, col) : undefined;
+          return (
+            <circle
+              key={i}
+              data-slot="dot-matrix-dot"
+              cx={2 + col * 4}
+              cy={2 + row * 4}
+              r={1.3}
+              className="[transition-property:--aui-dot-matrix-hi,--aui-dot-matrix-lo,opacity] duration-300 [animation-iteration-count:infinite] [animation-name:aui-dot-matrix-blink] [animation-timing-function:ease-in-out] motion-reduce:[animation-name:none]"
+              style={
+                {
+                  opacity: hi,
+                  animationDuration: `${blink?.duration ?? 1}s`,
+                  animationDelay: `${blink?.delay ?? 0}s`,
+                  "--aui-dot-matrix-hi": hi,
+                  "--aui-dot-matrix-lo": blink?.lo ?? hi,
+                } as CSSProperties
+              }
+            />
+          );
+        })}
+      </svg>
+    </span>
+  );
+}
+
+export { DotMatrix, dotMatrixStates };

package/src/components/chat/skins/base/ui/popover.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+
+import { cn } from "../../../../../lib/utils";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  PopoverPrimitive.Popup.Props &
+    Pick<
+      PopoverPrimitive.Positioner.Props,
+      "align" | "alignOffset" | "side" | "sideOffset"
+    >
+>(function PopoverContent(
+  {
+    className,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          ref={ref}
+          data-slot="popover-content"
+          className={cn(
+            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-[var(--radius-surface,var(--radius-lg))] p-3 text-sm ring-1 outline-hidden duration-100",
+            className,
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+});
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+};

package/src/components/chat/skins/base/ui/skeleton.tsx

@@ -0,0 +1,20 @@
+/**
+ * Base skin skeleton: the assistant-ui / shadcn default, drawn only from the theme
+ * tokens (background, foreground, popover, muted, primary, border, ring), so a
+ * tenant or brand theme restyles it. The stock (digichat) twin keeps its own
+ * square look; nothing in the base skin path may import it
+ * (base-skin-theme-surfaces.source.test.ts).
+ */
+import { cn } from "../../../../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/chat/skins/base/ui/textarea.tsx

@@ -0,0 +1,24 @@
+/**
+ * Base skin textarea: the assistant-ui / shadcn default, drawn only from the theme
+ * tokens (background, foreground, popover, muted, primary, border, ring), so a
+ * tenant or brand theme restyles it. The stock (digichat) twin keeps its own
+ * square look; nothing in the base skin path may import it
+ * (base-skin-theme-surfaces.source.test.ts).
+ */
+import * as React from "react"
+import { cn } from "../../../../../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/chat/skins/base/ui/tooltip.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+/**
+ * Base skin tooltip: the assistant-ui / shadcn default, drawn only from the theme
+ * tokens (background, foreground, popover, muted, primary, border, ring), so a
+ * tenant or brand theme restyles it. The stock (digichat) twin keeps its own
+ * square look; nothing in the base skin path may import it
+ * (base-skin-theme-surfaces.source.test.ts).
+ */
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "../../../../../lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow data-slot="tooltip-arrow" className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/chat/skins/base-assistant-ui/config-provider.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import {
+  defaultBaseConfig,
+  type ResolvedBaseConfig,
+} from "./defaults";
+
+const BaseConfigContext = createContext<ResolvedBaseConfig>(defaultBaseConfig);
+
+export function BaseConfigProvider({
+  value,
+  children,
+}: {
+  value: ResolvedBaseConfig;
+  children: ReactNode;
+}) {
+  const theme = value.brandTheme;
+  const style = {
+    "--background": theme.background,
+    "--foreground": theme.text,
+    "--muted": theme.surface,
+    "--muted-foreground": colorMix(theme.text, theme.background, 0.7),
+    "--accent": colorMix(theme.accent, theme.background, 0.18),
+    "--accent-foreground": theme.text,
+    "--border": colorMix(theme.surface, theme.text, 0.82),
+    "--input": colorMix(theme.surface, theme.text, 0.82),
+    "--ring": theme.accent,
+    "--primary": theme.accent,
+    "--primary-foreground": bestContrast(theme.accent),
+    "--popover": theme.background,
+    "--popover-foreground": theme.text,
+    "--card": theme.background,
+    "--card-foreground": theme.text,
+    "--sidebar": theme.surface,
+    "--sidebar-foreground": theme.text,
+    "--sidebar-primary": theme.accent,
+    "--sidebar-primary-foreground": bestContrast(theme.accent),
+    "--sidebar-accent": colorMix(theme.accent, theme.surface, 0.2),
+    "--sidebar-accent-foreground": theme.text,
+    "--sidebar-border": colorMix(theme.surface, theme.accent, 0.78),
+    "--sidebar-ring": theme.accent,
+  } as CSSProperties;
+
+  return (
+    <BaseConfigContext.Provider value={value}>
+      <div className="dark h-full" style={style}>
+        {children}
+      </div>
+    </BaseConfigContext.Provider>
+  );
+}
+
+export function useBaseConfig() {
+  return useContext(BaseConfigContext);
+}
+
+function colorMix(first: string, second: string, firstWeight: number) {
+  const a = parseHex(first);
+  const b = parseHex(second);
+  if (!a || !b) return first;
+
+  const mix = a.map((value, index) =>
+    Math.round(value * firstWeight + b[index] * (1 - firstWeight)),
+  );
+  return `#${mix.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+
+function bestContrast(hex: string) {
+  const rgb = parseHex(hex);
+  if (!rgb) return "#000000";
+  const luminance = (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]) / 255;
+  return luminance > 0.6 ? "#09090b" : "#ffffff";
+}
+
+function parseHex(hex: string) {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex);
+  if (!match) return null;
+  const value = match[1];
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}