@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/riso/RisoStamp.tsx

@@ -1,76 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Hand-stamped label — slightly rotated, bordered, with an offset
-// ink block "shadow." The riso equivalent of a Tag but louder.
-// Use for "NEW", "LIMITED", "ED. 01", "OUT NOW" annotations
-// layered over photos / hero blocks.
-
-export interface RisoStampProps {
-  children?: ReactNode;
-  // Ink color of the stamp face. Defaults to pink.
-  ink?: "pink" | "blue" | "yellow" | "orange" | "teal" | "violet" | "red" | "green";
-  // Ink color of the offset block behind. Defaults to ink-black.
-  offset?: "pink" | "blue" | "yellow" | "orange" | "teal" | "violet" | "red" | "green" | "ink";
-  // Rotation in degrees. Defaults to -4.
-  rotate?: number;
-  // Larger / smaller sizing presets.
-  size?: "sm" | "md" | "lg";
-  className?: string;
-  style?: CSSProperties;
-}
-
-const INKS: Record<string, string> = {
-  pink:   "var(--ck-riso-pink, #FF48B0)",
-  blue:   "var(--ck-riso-blue, #3D5AFE)",
-  yellow: "var(--ck-riso-yellow, #FFE100)",
-  orange: "var(--ck-riso-orange, #FF6F3C)",
-  teal:   "var(--ck-riso-teal, #00A99D)",
-  violet: "var(--ck-riso-violet, #765BA7)",
-  red:    "var(--ck-riso-red, #F02D2D)",
-  green:  "var(--ck-riso-green, #00A95C)",
-  ink:    "var(--ck-text-primary, #1A1A1A)",
-};
-
-const SIZES = {
-  sm: { font: 10, padX: 6, padY: 3, offset: 2 },
-  md: { font: 12, padX: 10, padY: 5, offset: 3 },
-  lg: { font: 16, padX: 14, padY: 7, offset: 4 },
-} as const;
-
-export function RisoStamp({
-  children,
-  ink = "pink",
-  offset = "ink",
-  rotate = -4,
-  size = "md",
-  className,
-  style,
-}: RisoStampProps) {
-  const inkColor = INKS[ink] ?? INKS.pink;
-  const offsetColor = INKS[offset] ?? INKS.ink;
-  const s = SIZES[size];
-  // Yellow / lime ink reads better with dark text.
-  const lightOnDark = ink === "yellow" || ink === "orange" || ink === "green" || ink === "pink";
-  return (
-    <span
-      className={className}
-      style={{
-        display: "inline-block",
-        background: inkColor,
-        color: lightOnDark ? "#1A1A1A" : "#F8F1DE",
-        border: "2px solid #1A1A1A",
-        borderRadius: 4,
-        padding: `${s.padY}px ${s.padX}px`,
-        font: `800 ${s.font}px/1 "Helvetica Neue", "Inter", system-ui, sans-serif`,
-        letterSpacing: "0.08em",
-        textTransform: "uppercase",
-        boxShadow: `${s.offset}px ${s.offset}px 0 ${offsetColor}`,
-        transform: `rotate(${rotate}deg)`,
-        whiteSpace: "nowrap",
-        ...style,
-      }}
-    >
-      {children}
-    </span>
-  );
-}

package/src/riso/index.ts

@@ -1,3 +0,0 @@
-export * from "./RisoStamp";
-export * from "./Misregister";
-export * from "./Halftone";

package/src/sketch/HandUnderline.tsx

@@ -1,53 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Wraps a string of text with a hand-drawn underline. The
-// underline is a CSS-only wobble using the same SVG-filter trick
-// the chrome uses on hr / .ck-card head strokes. Falls back to a
-// solid 2px line in browsers that ignore the data-URL filter.
-
-export interface HandUnderlineProps {
-  children?: ReactNode;
-  // Underline color. Defaults to the current text color.
-  ink?: string;
-  // Thickness in px. Defaults to 2.
-  thickness?: number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function HandUnderline({
-  children,
-  ink = "currentColor",
-  thickness = 2,
-  className,
-  style,
-}: HandUnderlineProps) {
-  return (
-    <span
-      className={className}
-      style={{
-        position: "relative",
-        display: "inline-block",
-        paddingBottom: 2,
-        ...style,
-      }}
-    >
-      {children}
-      <span
-        aria-hidden
-        style={{
-          position: "absolute",
-          left: 0,
-          right: 0,
-          bottom: -1,
-          height: thickness,
-          background: ink,
-          borderRadius: thickness,
-          filter: "var(--ck-sketch-wobble)",
-          opacity: 0.85,
-          pointerEvents: "none",
-        }}
-      />
-    </span>
-  );
-}

package/src/sketch/RoughArrow.tsx

@@ -1,91 +0,0 @@
-import type { CSSProperties } from "react";
-
-// Inline SVG hand-drawn arrow. Used between elements on a canvas
-// to indicate connection / flow, or as an annotation pointer.
-// The path is hand-tuned to feel drawn, not generated — small
-// kinks, asymmetric arrowhead. Stroke color + width controllable.
-//
-// The arrow draws on via stroke-dasharray animation on mount when
-// `animated` is true.
-
-export interface RoughArrowProps {
-  // Endpoints in px (relative to the SVG's own coordinate space).
-  from?: [number, number];
-  to?: [number, number];
-  // Stroke color. Defaults to ink.
-  ink?: string;
-  // Stroke thickness. Defaults to 2.
-  thickness?: number;
-  // Curve amount — 0 is a straight wobble, 1 is a strong arc.
-  curve?: number;
-  // Animate the draw-on. Defaults to false (instant).
-  animated?: boolean;
-  width?: number | string;
-  height?: number | string;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function RoughArrow({
-  from = [10, 40],
-  to = [220, 40],
-  ink = "var(--ck-text-primary, #1A1A1A)",
-  thickness = 2,
-  curve = 0.4,
-  animated = false,
-  width = 240,
-  height = 80,
-  className,
-  style,
-}: RoughArrowProps) {
-  const [x1, y1] = from;
-  const [x2, y2] = to;
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const len = Math.sqrt(dx * dx + dy * dy);
-  // Perpendicular for the control offsets — produces a gentle arc.
-  const px = -dy / len;
-  const py = dx / len;
-  // Two control points with tiny irregular wobble.
-  const cx1 = x1 + dx * 0.3 + px * len * curve * 0.4;
-  const cy1 = y1 + dy * 0.3 + py * len * curve * 0.4;
-  const cx2 = x1 + dx * 0.7 + px * len * curve * 0.5 + 2;
-  const cy2 = y1 + dy * 0.7 + py * len * curve * 0.5 - 1;
-
-  const path = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
-
-  // Arrowhead — two strokes meeting at (x2,y2). Length and angle
-  // pre-computed from the (cx2 → x2) direction.
-  const ahLen = 14;
-  const angle = Math.atan2(y2 - cy2, x2 - cx2);
-  const aOpen = 0.45;
-  const ax1 = x2 - Math.cos(angle - aOpen) * ahLen;
-  const ay1 = y2 - Math.sin(angle - aOpen) * ahLen;
-  const ax2 = x2 - Math.cos(angle + aOpen) * ahLen;
-  const ay2 = y2 - Math.sin(angle + aOpen) * ahLen;
-
-  // Pen-press effect — slightly thicker stroke at start/end via
-  // overlaid short paths. Keeps SVG light, no shaders.
-  return (
-    <svg
-      className={className}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${typeof width === "number" ? width : 240} ${typeof height === "number" ? height : 80}`}
-      style={{ overflow: "visible", display: "block", ...style }}
-      aria-hidden
-    >
-      <g
-        fill="none"
-        stroke={ink}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={thickness}
-      >
-        <path d={path} className={animated ? "ck-sketch-drawon" : undefined} style={animated ? { ["--ck-sketch-len" as never]: len + 30 } : undefined} />
-        <path d={`M ${x2} ${y2} L ${ax1} ${ay1}`} />
-        <path d={`M ${x2} ${y2} L ${ax2} ${ay2}`} />
-      </g>
-    </svg>
-  );
-}

package/src/sketch/RoughBox.tsx

@@ -1,73 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// A drawn rectangle — used to wrap any content in a "sketched"
-// container. CSS-only: asymmetric border-radius + 2px ink stroke
-// + offset second stroke shadow. Pair with `tilt` and an optional
-// `fill` (transparent | hatch | marker color) for emphasis.
-//
-// Why a primitive: this is the canonical "drawn rectangle" pattern
-// — buttons, cards, sticky notes, tool tips all inherit from it.
-// Wrapping it once keeps the wobble math + tilt presets DRY.
-
-export interface RoughBoxProps {
-  children?: ReactNode;
-  // Tilt in degrees. Defaults to a small -1.
-  tilt?: number;
-  // Fill style. Defaults to "paper". "hatch" lays down diagonal
-  // marker strokes; "marker" floods a translucent marker color.
-  fill?: "paper" | "hatch" | "marker" | "transparent";
-  // Marker color when fill="hatch" or fill="marker". Accepts any
-  // CSS color, including the --ck-sketch-* vars.
-  ink?: string;
-  // Override radius. Defaults to a chrome-aware asymmetric value.
-  radius?: string;
-  // Drawing thickness, in px. Defaults to 2.
-  stroke?: number;
-  // Padding inside the box. Defaults to 16.
-  padding?: number | string;
-  // Set to true to skip the offset second-stroke shadow.
-  flat?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function RoughBox({
-  children,
-  tilt = -1,
-  fill = "paper",
-  ink = "var(--ck-sketch-yellow, #F2C94C)",
-  radius = "10px 14px 12px 16px / 14px 10px 16px 12px",
-  stroke = 2,
-  padding = 16,
-  flat = false,
-  className,
-  style,
-}: RoughBoxProps) {
-  const inkColor = "var(--ck-text-primary, #1A1A1A)";
-  let background: string;
-  if (fill === "hatch") {
-    background = `repeating-linear-gradient(45deg, ${ink} 0 3px, transparent 3px 9px), var(--ck-bg-surface, #FFFEF9)`;
-  } else if (fill === "marker") {
-    background = `color-mix(in oklab, ${ink} 22%, transparent), var(--ck-bg-surface, #FFFEF9)`;
-  } else if (fill === "transparent") {
-    background = "transparent";
-  } else {
-    background = "var(--ck-bg-surface, #FFFEF9)";
-  }
-  return (
-    <div
-      className={className}
-      style={{
-        background,
-        border: `${stroke}px solid ${inkColor}`,
-        borderRadius: radius,
-        boxShadow: flat ? "none" : `3px 4px 0 ${inkColor}`,
-        padding,
-        transform: `rotate(${tilt}deg)`,
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/sketch/StickyNote.tsx

@@ -1,56 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Yellow / pink / green sticky note with a tiny rotation, hand-
-// drawn second-stroke shadow, and handwriting-leaning font.
-// Useful for callouts, empty-state captions, toasts.
-
-export interface StickyNoteProps {
-  children?: ReactNode;
-  color?: "yellow" | "pink" | "green" | "blue" | "orange";
-  // Rotation in degrees. Defaults to a small alternating tilt.
-  tilt?: number;
-  width?: number | string;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const COLORS: Record<NonNullable<StickyNoteProps["color"]>, string> = {
-  yellow: "#FFF3B0",
-  pink:   "#FFD1E3",
-  green:  "#D6F0DC",
-  blue:   "#D6E8FF",
-  orange: "#FFE0C7",
-};
-
-export function StickyNote({
-  children,
-  color = "yellow",
-  tilt = -2,
-  width = 220,
-  className,
-  style,
-}: StickyNoteProps) {
-  return (
-    <div
-      className={className}
-      style={{
-        background: COLORS[color],
-        width,
-        minHeight: 120,
-        padding: "18px 18px 22px",
-        border: "1.5px solid rgba(26,26,26,0.5)",
-        borderRadius: "4px 8px 5px 9px / 6px 4px 9px 5px",
-        boxShadow:
-          "3px 4px 0 rgba(26,26,26,0.85), 6px 10px 18px rgba(0,0,0,0.08)",
-        transform: `rotate(${tilt}deg)`,
-        font:
-          "500 17px/1.45 \"Caveat\", \"Patrick Hand\", \"Kalam\", \"Comic Sans MS\", cursive",
-        color: "#1A1A1A",
-        position: "relative",
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/sketch/index.ts

@@ -1,4 +0,0 @@
-export * from "./RoughBox";
-export * from "./StickyNote";
-export * from "./RoughArrow";
-export * from "./HandUnderline";

package/src/styles/base.css

@@ -1,186 +0,0 @@
-/* Global base — applied once at the consumer root so the kit's
-   typography, color, and motion behaviour kick in. Components
-   themselves are class-driven (`ck-*` prefix) and don't depend on
-   this file being loaded, but consumers should import it to get
-   the cross-fade theme transitions and reduced-motion handling. */
-
-/* Inheritance-friendly box-sizing — modern reset best practice.
-   Without it, `min-height: 100vh` + padding silently extends the
-   element BEYOND the viewport (default `content-box` makes padding
-   stack ON TOP of the declared min-height), introducing a sneaky
-   scroll on any consumer page that combines those two properties.
-   Every modern reset (Eric Meyer 2014, Tailwind preflight,
-   Bootstrap, modern-normalize) ships this — @cosxai/ui matches. */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  background: var(--ck-bg-canvas);
-  color: var(--ck-text-primary);
-  font-family: var(--ck-font-sans);
-  font-feature-settings: "ss01", "cv11";
-  -webkit-font-smoothing: antialiased;
-  /* Cross-fade tones when --ck-bg-canvas / --ck-text-primary flip
-     on theme toggle. All component tokens read from the same vars
-     so they shift in lockstep without per-element transitions. */
-  transition: background-color 200ms var(--ck-ease), color 200ms var(--ck-ease);
-}
-
-/* Anchor — defaults to the active chrome's accent + a clean
-   underline. Without this rule, the browser's visited-link
-   purple bleeds through any theme (most notably terminal /
-   editorial). Components that want different styling (NavItem,
-   TopBar nav, breadcrumbs, in-card secondary links) override
-   locally with a more-specific selector. */
-a {
-  color: var(--ck-accent);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
-  transition: color var(--ck-dur-fast) var(--ck-ease);
-}
-a:hover { color: var(--ck-accent-hover); }
-a:visited { color: var(--ck-accent); }
-
-/* ---------- Typography utilities ---------- */
-.ck-h1 { font: 500 32px/1.2 var(--ck-font-sans); letter-spacing: -0.01em; color: var(--ck-text-primary); margin: 0; }
-.ck-h2 { font: 500 24px/1.3 var(--ck-font-sans); letter-spacing: -0.005em; color: var(--ck-text-primary); margin: 0; }
-.ck-h3 { font: 500 20px/1.4 var(--ck-font-sans); color: var(--ck-text-primary); margin: 0; }
-.ck-body    { font: 400 16px/1.55 var(--ck-font-sans); color: var(--ck-text-primary); }
-.ck-body-sm { font: 400 14px/1.5  var(--ck-font-sans); color: var(--ck-text-primary); }
-.ck-caption { font: 400 13px/1.4  var(--ck-font-sans); color: var(--ck-text-tertiary); }
-
-.ck-mono { font-family: var(--ck-font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
-
-/* Section eyebrow — small uppercase mono caption ("ACCESS · SHARES")
-   that sits above titles in cards / panels. */
-.ck-eyebrow {
-  font: 500 var(--ck-mono-xs-size)/1 var(--ck-font-mono);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ck-text-tertiary);
-  display: inline-block;
-}
-
-/* One-step-smaller sibling of eyebrow — for status pills (PENDING,
-   LIVE, Accepted, Revoked), meta tags inside list rows. */
-.ck-tag {
-  font: 500 var(--ck-mono-tag-size)/1 var(--ck-font-mono);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ck-text-tertiary);
-  display: inline-block;
-}
-
-.ck-meta {
-  font: 400 var(--ck-mono-sm-size)/1.4 var(--ck-font-mono);
-  color: var(--ck-text-tertiary);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ---------- Motion primitives ---------- */
-@keyframes ck-slide-in-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
-@keyframes ck-slide-in-left  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
-@keyframes ck-fade-in        { from { opacity: 0; } to { opacity: 1; } }
-@keyframes ck-popover-enter  { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
-@keyframes ck-page-enter     { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-/* Full-distance entrances for phone modal presentations: a pushed
-   page slides in from the right edge, a sheet rises from the bottom.
-   Unlike the 14px nudges above these travel the whole viewport. */
-@keyframes ck-page-push      { from { transform: translateX(100%); } to { transform: translateX(0); } }
-@keyframes ck-sheet-up       { from { transform: translateY(100%); } to { transform: translateY(0); } }
-
-.ck-anim-slide-right { animation: ck-slide-in-right 180ms var(--ck-ease) both; }
-.ck-anim-slide-left  { animation: ck-slide-in-left  180ms var(--ck-ease) both; }
-.ck-anim-fade        { animation: ck-fade-in        180ms var(--ck-ease) both; }
-.ck-anim-popover     { animation: ck-popover-enter  160ms var(--ck-ease) both; transform-origin: top center; }
-.ck-anim-page        { animation: ck-page-enter     var(--ck-dur-page) cubic-bezier(0.16, 1, 0.3, 1) both; }
-.ck-anim-page-push   { animation: ck-page-push      260ms cubic-bezier(0.32, 0.72, 0, 1) both; }
-.ck-anim-sheet-up    { animation: ck-sheet-up       260ms cubic-bezier(0.32, 0.72, 0, 1) both; }
-
-/* Respect the user's OS-level motion preference. Cross-fade
-   transitions on bg/colour stay (below the meaningful-motion
-   threshold); element-level animations are killed. */
-@media (prefers-reduced-motion: reduce) {
-  .ck-anim-slide-right,
-  .ck-anim-slide-left,
-  .ck-anim-fade,
-  .ck-anim-popover,
-  .ck-anim-page,
-  .ck-anim-page-push,
-  .ck-anim-sheet-up {
-    animation: none;
-  }
-}
-
-/* Scrollbars — macOS renders auto-hiding overlay bars, but Windows
-   (and Linux) render CLASSIC opaque gutters that read as heavy grey
-   slabs against the kit's editorial surfaces (QA: Ben, 2026-07-19).
-   The standard properties slim them down and tint the thumb from
-   the theme's border token so both light and dark chrome stay
-   coherent. `scrollbar-color` inherits from :root; `scrollbar-width`
-   doesn't, hence the universal selector. Browsers without support
-   (older Safari) keep their native overlay bars — already fine. */
-* {
-  scrollbar-width: thin;
-}
-:root {
-  scrollbar-color: var(--ck-border-strong, rgba(0, 0, 0, 0.25)) transparent;
-}
-
-/* Chromium < 121 doesn't know the standard properties above and fell
-   back to the classic arrow-button gutters (QA: Ben, 2026-07-24 —
-   the first pass "didn't cover everything"; it actually didn't cover
-   older ENGINES). The ::-webkit-scrollbar layer is the fallback for
-   those versions; engines that support scrollbar-width IGNORE these
-   pseudo-elements when it's set, so the two blocks never fight. */
-*::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-*::-webkit-scrollbar-thumb {
-  background: var(--ck-border-strong, rgba(0, 0, 0, 0.25));
-  border-radius: 4px;
-}
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-*::-webkit-scrollbar-corner {
-  background: transparent;
-}
-*::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
-
-/* ── ActionBar panel + toast slots (design#13) ─────────────────────
-   Base chrome for the bar-intrinsic popover (useActionBarPanel) and
-   transient bubble (useActionBarToast). Token-driven so every theme
-   reads correctly by default; chrome-*.css sharpens identity themes
-   (neobrutalism ink shadows, sketch wobble, terminal flatness). */
-.ck-actionbar-panel {
-  background: var(--ck-bg-surface, #fff);
-  border: 1px solid var(--ck-border-subtle, #e5e7eb);
-  border-radius: 12px;
-  box-shadow: var(--ck-shadow-3, 0 16px 48px rgba(0, 0, 0, 0.12));
-  padding: 16px;
-  font-family: var(--ck-font-sans, system-ui, sans-serif);
-  color: var(--ck-text-primary);
-  user-select: none;
-}
-.ck-actionbar-toast {
-  background: var(--ck-bg-surface, #fff);
-  border: 1px solid var(--ck-border-subtle, #e5e7eb);
-  border-radius: 10px;
-  box-shadow: var(--ck-shadow-3, 0 16px 48px rgba(0, 0, 0, 0.12));
-  padding: 10px 14px;
-  font-size: 12px;
-  font-family: var(--ck-font-sans, system-ui, sans-serif);
-  color: var(--ck-text-primary);
-  user-select: none;
-}