@lettuceai/crisp 1.0.0

package/dist/layout/Box.d.ts

@@ -0,0 +1,6 @@
+import type { PolymorphicComponent } from "../lib/polymorphic";
+/**
+ * The root primitive. A `div` by default; `as` swaps the element, `className` styles it.
+ * Styling is Tailwind classes, not style props — that keeps one styling language across the codebase.
+ */
+export declare const Box: PolymorphicComponent<"div">;

package/dist/layout/Center.d.ts

@@ -0,0 +1,2 @@
+import type { PolymorphicComponent } from "../lib/polymorphic";
+export declare const Center: PolymorphicComponent<"div">;

package/dist/layout/Container.d.ts

@@ -0,0 +1,8 @@
+import type { PolymorphicComponent } from "../lib/polymorphic";
+export interface ContainerOwnProps {
+    /** sm 640 · md 768 · lg 1024 · xl 1280 · prose 65ch (reading column) */
+    size?: "sm" | "md" | "lg" | "xl" | "prose";
+    /** Drop the horizontal padding — for containers nested in something already padded. */
+    flush?: boolean;
+}
+export declare const Container: PolymorphicComponent<"div", ContainerOwnProps>;

package/dist/layout/Divider.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    orientation?: "horizontal" | "vertical";
+    /** Text set into the line — "or", a date, a section name. */
+    label?: ReactNode;
+    /** Vertical rhythm around a horizontal divider. */
+    spacing?: "none" | "sm" | "md" | "lg";
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/layout/Flex.d.ts

@@ -0,0 +1,16 @@
+import type { PolymorphicComponent } from "../lib/polymorphic";
+export type Gap = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+export type Align = "start" | "center" | "end" | "stretch" | "baseline";
+export type Justify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export declare const gapClass: Record<Gap, string>;
+export declare const alignClass: Record<Align, string>;
+export declare const justifyClass: Record<Justify, string>;
+export interface FlexOwnProps {
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+    gap?: Gap;
+    inline?: boolean;
+}
+export declare const Flex: PolymorphicComponent<"div", FlexOwnProps>;

package/dist/layout/Grid.d.ts

@@ -0,0 +1,13 @@
+import type { PolymorphicComponent } from "../lib/polymorphic";
+import { type Gap } from "./Flex";
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
+export type ResponsiveColumns = Columns | Partial<Record<Breakpoint, Columns>>;
+export interface GridOwnProps {
+    /** A number, or per-breakpoint: `{ base: 1, sm: 2, lg: 3 }`. */
+    columns?: ResponsiveColumns;
+    gap?: Gap;
+    /** Auto-fit columns with a minimum track width — for card grids that should just flow. */
+    minChildWidth?: string;
+}
+export declare const Grid: PolymorphicComponent<"div", GridOwnProps>;

package/dist/layout/Spacer.d.ts

@@ -0,0 +1,4 @@
+/** Fills the free space in a Flex/HStack so siblings push to the edges. */
+export declare function Spacer({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/layout/Stack.d.ts

@@ -0,0 +1,13 @@
+import type { PolymorphicComponent } from "../lib/polymorphic";
+import { type Align, type Gap, type Justify } from "./Flex";
+export interface StackOwnProps {
+    gap?: Gap;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+}
+/** Vertical rhythm. Children stretch to full width. */
+export declare const Stack: PolymorphicComponent<"div", StackOwnProps>;
+export declare const VStack: PolymorphicComponent<"div", StackOwnProps>;
+/** Horizontal row with vertically centred children. */
+export declare const HStack: PolymorphicComponent<"div", StackOwnProps>;

package/dist/layout/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./Box";
+export * from "./Center";
+export * from "./Container";
+export * from "./Divider";
+export * from "./Flex";
+export * from "./Grid";
+export * from "./Spacer";
+export * from "./Stack";

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/color.d.ts

@@ -0,0 +1,16 @@
+/** Colour helpers. Deriving is left to CSS `color-mix`; this is only the maths CSS can't do. */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare function normaliseHex(input: string): string | null;
+/** WCAG relative luminance. */
+export declare function luminance(hex: string): number;
+/** WCAG contrast ratio, 1–21. Body text wants 4.5, large text and UI edges 3. */
+export declare function contrastRatio(a: string, b: string): number;
+export declare function isLight(hex: string): boolean;
+/** Black or white, whichever is readable on the given background. */
+export declare function readableOn(background: string): string;
+/** Blend two hex colours in sRGB. Used where a literal value is needed, not a var. */
+export declare function mixHex(a: string, b: string, amount: number): string;

package/dist/lib/format.d.ts

@@ -0,0 +1,6 @@
+/** "Just now", "4 min ago", "Yesterday", "3 wk ago" — how a list says when. */
+export declare function relativeTime(when: Date | number, now?: Date | number): string;
+/** 950 → "950", 1 240 → "1.2k", 18 300 → "18k", 2 140 000 → "2.1M". */
+export declare function compactNumber(n: number): string;
+/** 1 536 000 → "1.5 MB". */
+export declare function fileSize(bytes: number): string;

package/dist/lib/frame.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+interface FrameValue {
+    /** Where overlays portal to. `null` is the document body — the real app. */
+    portal: HTMLElement | null;
+    /** Force the phone or desktop layout for this subtree, whatever the viewport says. */
+    compact?: boolean;
+}
+/**
+ * Runs a piece of the app inside a device frame on the lab page: overlays open inside
+ * the frame instead of at the bottom of the browser window, and layout decisions follow
+ * the device being simulated rather than the monitor it is being viewed on.
+ *
+ * The element passed as `portal` must establish a containing block for fixed-position
+ * descendants (a `transform` does it), or sheets will still pin to the viewport.
+ *
+ * The real app never mounts this. Every hook falls back to the document and the
+ * viewport, so components written against it behave identically outside a frame.
+ */
+export declare function FrameProvider({ portal, compact, children }: FrameValue & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useFrame(): FrameValue;
+/** The node overlays should portal into. */
+export declare function usePortalTarget(): HTMLElement | null;
+export {};

package/dist/lib/icon.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The icon ladder. Five steps, mapped to what an icon sits next to, so nobody has to
+ * pick a number again.
+ *
+ * Before this file Crisp had eleven sizes in use — 10, 11, 12, 13, 14, 15, 16, 17, 18,
+ * 20, 22 — which is the same drift the README criticises the app for. Fifteen next to
+ * sixteen is a difference nobody sees and everybody maintains.
+ *
+ * Type, spacing, radius, density and motion all went through a scale. This is the one
+ * axis that never did.
+ */
+export declare const icon: {
+    /** Inline with 11–12px meta: a pin beside a timestamp, a dot in a badge. */
+    readonly xs: 12;
+    /** Small controls and dense rows — `sm` buttons, chips, clear buttons. */
+    readonly sm: 14;
+    /** The default. `md` controls, menu items, inputs, a chevron. */
+    readonly md: 16;
+    /** `lg` controls, the icon tile in a list row, toolbars, nav destinations. */
+    readonly lg: 18;
+    /** Standing alone with no label: empty states, a composer's primary action. */
+    readonly xl: 20;
+};
+export type IconSize = keyof typeof icon;

package/dist/lib/imageBrightness.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Mean relative luminance of an image, 0–1. Sampled at 12×12 — enough to tell a lit
+ * room from a dark one, cheap enough to run on every background change.
+ *
+ * Returns `null` while loading, or if the canvas is tainted by a cross-origin image.
+ * Callers must treat `null` as "unknown" and keep a safe default, never guess bright.
+ */
+export declare function useImageBrightness(src?: string | null): number | null;

package/dist/lib/motion.d.ts

@@ -0,0 +1,54 @@
+import type { Transition } from "framer-motion";
+/**
+ * Every animation in Crisp goes through one of these. Before this file there were
+ * seven durations and six springs scattered inline — the same drift the app has with
+ * fifteen icon sizes, just in milliseconds.
+ *
+ * Pick by what the motion is *for*, not by how long it should take.
+ */
+/** Something swapped in place: an icon, a tooltip, a popover, a context menu. */
+export declare const instant: Transition;
+/** Something appeared or resolved: a fade, a disclosure, a dialog. */
+export declare const quick: Transition;
+/** Something travelled: a progress bar, a large reveal. */
+export declare const slow: Transition;
+/** A small control snapping to a new position: a switch knob. */
+export declare const snap: Transition;
+/** A moving indicator settling: active tab, segmented control, stepper. */
+export declare const settle: Transition;
+/** A large surface arriving: sheets, panels, spotlight. */
+export declare const surface: Transition;
+/** Easing for height and layout changes, where a spring would overshoot. */
+export declare const easeOut: readonly [0.25, 1, 0.5, 1];
+/** Collapsing and expanding, which must not overshoot or the content clips. */
+export declare const collapse: Transition;
+/** A sheet presenting from an edge. Covers the distance quickly, lands without a wobble. */
+export declare const sheetIn: Transition;
+/** A sheet dismissed. Faster than it came, and it never bounces on the way out. */
+export declare const sheetOut: Transition;
+/** A sheet let go short of closing. Returns from the speed it was thrown at, and stops
+    at its resting place — an overshoot there would lift it off the edge. */
+export declare const sheetSettle: Transition;
+/** A side panel widening or folding back. No overshoot: the content beside it reflows
+    with it, and a bounce would shake every line of text twice. */
+export declare const sidebar: Transition;
+/** A dragged card letting go and returning to rest. Stiff, so it snaps rather than drifts. */
+export declare const rebound: Transition;
+/** A looping ambient cycle — the typing indicator. Not a transition; it never resolves. */
+export declare const pulse: Transition;
+export declare const motion: {
+    readonly instant: Transition;
+    readonly quick: Transition;
+    readonly slow: Transition;
+    readonly snap: Transition;
+    readonly settle: Transition;
+    readonly surface: Transition;
+    readonly sheetIn: Transition;
+    readonly sheetOut: Transition;
+    readonly sheetSettle: Transition;
+    readonly sidebar: Transition;
+    readonly rebound: Transition;
+    readonly collapse: Transition;
+    readonly pulse: Transition;
+    readonly easeOut: readonly [0.25, 1, 0.5, 1];
+};

package/dist/lib/polymorphic.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, PropsWithChildren } from "react";
+type AsProp<C extends ElementType> = {
+    as?: C;
+};
+type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);
+/** Props for a component that can render as any element via `as`, keeping that element's own props. */
+export type PolymorphicProps<C extends ElementType, Props = object> = PropsWithChildren<Props & AsProp<C>> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
+export type PolymorphicComponent<DefaultTag extends ElementType, Props = object> = <C extends ElementType = DefaultTag>(props: PolymorphicProps<C, Props> & {
+    ref?: PolymorphicRef<C>;
+}) => React.ReactElement | null;
+export {};

package/dist/lib/tint.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Deterministic tint from a name, used as the backdrop when an item has no image.
+ * The app derives this from the avatar's own colours; the fallback only has to be
+ * stable, so the same character always looks the same.
+ */
+export declare function tintFromName(name: string): {
+    hue: number;
+    background: string;
+};

package/dist/lib/useLongPress.d.ts

@@ -0,0 +1,19 @@
+import type { MouseEvent, PointerEvent } from "react";
+/**
+ * Long-press (and right-click) on a button, without swallowing the normal click.
+ * Returns handlers to spread on the element.
+ */
+export declare function useLongPress(onLongPress: (() => void) | undefined, { delay, enabled }?: {
+    delay?: number | undefined;
+    enabled?: boolean | undefined;
+}): {
+    handlers: {
+        onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+        onPointerUp: () => void;
+        onPointerLeave: () => void;
+        onPointerCancel: () => void;
+        onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    };
+    guardClick: (handler: () => void) => (event: MouseEvent<HTMLElement>) => void;
+};

package/dist/lib/useMediaQuery.d.ts

@@ -0,0 +1,8 @@
+/** Subscribes to a media query. SSR-safe: returns `false` on the server. */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * "Is this a touch-first, phone-sized viewport?"
+ * Width alone is wrong (a small desktop window still has a mouse) and pointer alone
+ * is wrong (a Surface has both), so we ask for narrow OR coarse.
+ */
+export declare function useCompactLayout(): boolean;

package/dist/lib/useModal.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+/**
+ * Shared modal behaviour for Sheet and Dialog: Escape closes, body scroll locks,
+ * focus moves inside on open and returns to the opener on close.
+ */
+export declare function useModal(open: boolean, onClose: () => void, panelRef: RefObject<HTMLElement | null>, { lockScroll }?: {
+    lockScroll?: boolean;
+}): void;

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { type Theme, type ThemeColors, type ThemeDensity, type ThemeRadius } from "./theme";
+interface ThemeContextValue {
+    theme: Theme;
+    presets: readonly Theme[];
+    setTheme: (theme: Theme) => void;
+    /** Change one colour and repaint immediately — this is the live-editing path. */
+    setColor: (key: keyof ThemeColors, value: string) => void;
+    setRadius: (radius: ThemeRadius) => void;
+    setDensity: (density: ThemeDensity) => void;
+    reset: () => void;
+    isCustom: boolean;
+}
+export declare function useTheme(): ThemeContextValue;
+export declare function ThemeProvider({ children, initial }: {
+    children: ReactNode;
+    initial?: Theme;
+}): import("react").JSX.Element;
+export {};

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./ThemeProvider";

package/dist/theme/theme.d.ts

@@ -0,0 +1,36 @@
+/**
+ * A theme is a handful of source colours. Everything else — the four text tiers, the
+ * three fills, the three lines, the elevated and nav surfaces — is derived, so changing
+ * one value re-colours the whole app consistently instead of leaving half of it behind.
+ */
+export interface ThemeColors {
+    /** The page. Decides light vs dark on its own. */
+    surface: string;
+    /** Text and everything tinted from it: fills, lines, the muted tiers. */
+    fg: string;
+    accent: string;
+    danger: string;
+    warning: string;
+    info: string;
+    secondary: string;
+    /** Navigation and title bars. Defaults to the elevated surface. */
+    nav?: string;
+}
+export type ThemeRadius = "sharp" | "default" | "round";
+export type ThemeDensity = "default" | "compact";
+export interface Theme {
+    id: string;
+    name: string;
+    colors: ThemeColors;
+    radius?: ThemeRadius;
+    density?: ThemeDensity;
+}
+/**
+ * Turns a theme into the CSS custom properties the components read.
+ * Tiers mix toward `transparent` rather than the surface colour, so the same formula
+ * works on a flat background, over a photo, and inside a gradient card.
+ */
+export declare function themeToVars(theme: Theme): Record<string, string>;
+export declare function applyTheme(theme: Theme, target?: HTMLElement): void;
+export declare const PRESETS: readonly Theme[];
+export declare const DEFAULT_THEME: Theme;

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@lettuceai/crisp",
+  "version": "1.0.0",
+  "description": "React components, design tokens and motion for LettuceAI.",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "tailwindcss",
+    "framer-motion",
+    "typescript",
+    "design-tokens",
+    "cross-platform"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/LettuceAI/crisp#readme",
+  "bugs": {
+    "url": "https://github.com/LettuceAI/crisp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LettuceAI/crisp"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "oxlint src",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=12",
+    "lucide-react": ">=1",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": ">=4"
+  },
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.14.11",
+    "clsx": "^2.1.1",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.10.1",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "framer-motion": "^13.2.0",
+    "lucide-react": "^1.43.0",
+    "oxlint": "^1.79.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2"
+  }
+}