@orangecheck/app-design 1.0.0 → 1.1.0

package/dist/styles/theme.css

@@ -177,6 +177,8 @@
 @layer base {
     [data-oc-app='ochk'] {
         font-family: var(--oc-font-sans);
+        /* Inter's contextual alternates turn "5x7" into "5×7", which rewrites addresses in prose. */
+        font-variant-ligatures: no-contextual;
         font-optical-sizing: auto;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;

package/dist/styles/tokens.css

@@ -87,6 +87,23 @@
     /* Code is a dark well in both modes, darker than any card in dark. */
     --oca-code-surface: #161616;
     --oca-code-line: #2a2a2a;
+    /* Syntax, from the deck's code card: rose keywords and tags, salmon
+       strings, peach numbers and constants, blue functions and keys, teal
+       types. Every one clears 4.5:1 on the well and on every marked line. */
+    --oca-code-keyword: #e3a8c2;
+    --oca-code-string: #e99a8f;
+    --oca-code-number: #fcb781;
+    --oca-code-function: #9db4ec;
+    --oca-code-type: #8fd0c2;
+    --oca-code-property: #9db4ec;
+    --oca-code-comment: #909397;
+    --oca-code-punctuation: #d5d8dc;
+    --oca-code-added: #86d39b;
+    --oca-code-removed: #f19a9a;
+    /* Marked lines: a highlighted line, an added one, a removed one. */
+    --oca-code-mark: #232323;
+    --oca-code-added-line: #1a2c20;
+    --oca-code-removed-line: #2f1c1c;
     /* The hairline between bands; only dark needs one. */
     --oca-band-line: transparent;
     --oca-skeleton: #e8e8e8;
@@ -109,6 +126,26 @@
     /* Sentence-case labels carry no trailing arrow (auth-client ≥ 2.29). */
     --oc-signin-arrow: none;
 
+    /* The wallet picker and sign button (@orangecheck/wallet-adapter's
+       OcWalletPicker and OcWalletButton) in this design, read the same way:
+       each variable's fallback there is today's family look. */
+    --oc-wallet-font: var(--oc-font-sans);
+    --oc-wallet-case: none;
+    --oc-wallet-tracking: 0;
+    --oc-wallet-scale: 1.25;
+    --oc-wallet-strong: 500;
+    --oc-wallet-radius: 0.875rem;
+    --oc-wallet-button-radius: 9999px;
+    --oc-wallet-min-height: 2.25rem;
+    --oc-wallet-surface: var(--card);
+    --oc-wallet-ready: var(--success);
+    /* A pasted signature's field: 16px, or iOS zooms into it (an inline size
+       outranks the package's phone rule). */
+    --oc-wallet-field-size: 1rem;
+    /* The glyphs the family look writes as decoration: "§ " before a heading,
+       "// " before a note, "← " before Back. */
+    --oc-wallet-mark: none;
+
     /* The deck has no shadows. Overlays get one, so a dialog still separates. */
     --oc-shadow-2xs: none;
     --oc-shadow-xs: none;
@@ -168,6 +205,9 @@
     --oca-icon-ring: #333333;
     --oca-code-surface: #0e0e0e;
     --oca-code-line: #2a2a2a;
+    --oca-code-mark: #1b1b1b;
+    --oca-code-added-line: #132519;
+    --oca-code-removed-line: #271414;
     --oca-band-line: #262626;
     --oca-skeleton: #222222;
 

package/dist/styles.css

@@ -12,3 +12,4 @@
 @import './styles/theme.css';
 @import './styles/tokens.css';
 @import './styles/motion.css';
+@import './styles/code.css';

package/dist/tool-shell-B1C7ahKE.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { i as ToolItem } from './tools-BggNN5DV.js';
+import { j as ProtocolSlug } from './index-C6hDqOOS.js';
+
+interface ShellNavItem {
+    href: string;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    badge?: ReactNode;
+}
+interface ShellNavGroup {
+    label?: string;
+    items: ShellNavItem[];
+}
+interface ShellSection {
+    id: string;
+    label: string;
+    title?: string;
+    href: string;
+    groups: ShellNavGroup[];
+}
+declare function AppShell({ nav, sections, activeSection, page: pageOverride, persistent, home, account, banner, footer, children, className, }: {
+    nav?: ShellNavGroup[];
+    sections?: ShellSection[];
+    activeSection?: string;
+    page?: string;
+    persistent?: ShellNavGroup[];
+    home?: string;
+    account?: ReactNode;
+    banner?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+interface AccountMenuItem {
+    label: string;
+    href?: string;
+    onSelect?: () => void;
+    icon?: ReactNode;
+    destructive?: boolean;
+}
+declare function AccountMenu({ name, detail, items, nameFrom, }: {
+    name: string;
+    detail?: string;
+    items: (AccountMenuItem | 'separator')[];
+    nameFrom?: 'sm' | 'lg';
+}): react.JSX.Element;
+declare function ThemeToggle({ className }: {
+    className?: string;
+}): react.JSX.Element;
+
+type SessionState = 'checking' | 'in' | 'out' | 'unknown';
+declare const OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
+declare function SessionAccountView({ state, name, detail, items, signInHref, signInLabel, accountHref, onSignOut, nameFrom, }: {
+    state: SessionState;
+    name?: string;
+    detail?: string;
+    items?: (AccountMenuItem | 'separator')[];
+    signInHref: string;
+    signInLabel?: string;
+    accountHref?: string;
+    onSignOut?: () => void;
+    nameFrom?: 'sm' | 'lg';
+}): react.JSX.Element;
+interface ToolShellProps {
+    protocol: ProtocolSlug;
+    tools: readonly ToolItem[];
+    home?: string;
+    account?: ReactNode;
+    rail?: boolean;
+    railFooter?: ReactNode;
+    variant?: 'tool' | 'app';
+    banner?: ReactNode;
+    footer?: ReactNode | false;
+    children: ReactNode;
+}
+declare function ToolShell({ protocol, tools, home, account, rail, railFooter, variant, banner, footer, children, }: ToolShellProps): react.JSX.Element;
+
+export { AccountMenu as A, OCHK_APP_ACCOUNT as O, SessionAccountView as S, ThemeToggle as T, type AccountMenuItem as a, AppShell as b, type SessionState as c, type ShellNavGroup as d, type ShellNavItem as e, type ShellSection as f, ToolShell as g, type ToolShellProps as h };

package/dist/tool-shell-BDx_N5ai.d.mts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { i as ToolItem } from './tools-DFIxIj5p.mjs';
+import { j as ProtocolSlug } from './index-C6hDqOOS.mjs';
+
+interface ShellNavItem {
+    href: string;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    badge?: ReactNode;
+}
+interface ShellNavGroup {
+    label?: string;
+    items: ShellNavItem[];
+}
+interface ShellSection {
+    id: string;
+    label: string;
+    title?: string;
+    href: string;
+    groups: ShellNavGroup[];
+}
+declare function AppShell({ nav, sections, activeSection, page: pageOverride, persistent, home, account, banner, footer, children, className, }: {
+    nav?: ShellNavGroup[];
+    sections?: ShellSection[];
+    activeSection?: string;
+    page?: string;
+    persistent?: ShellNavGroup[];
+    home?: string;
+    account?: ReactNode;
+    banner?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+interface AccountMenuItem {
+    label: string;
+    href?: string;
+    onSelect?: () => void;
+    icon?: ReactNode;
+    destructive?: boolean;
+}
+declare function AccountMenu({ name, detail, items, nameFrom, }: {
+    name: string;
+    detail?: string;
+    items: (AccountMenuItem | 'separator')[];
+    nameFrom?: 'sm' | 'lg';
+}): react.JSX.Element;
+declare function ThemeToggle({ className }: {
+    className?: string;
+}): react.JSX.Element;
+
+type SessionState = 'checking' | 'in' | 'out' | 'unknown';
+declare const OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
+declare function SessionAccountView({ state, name, detail, items, signInHref, signInLabel, accountHref, onSignOut, nameFrom, }: {
+    state: SessionState;
+    name?: string;
+    detail?: string;
+    items?: (AccountMenuItem | 'separator')[];
+    signInHref: string;
+    signInLabel?: string;
+    accountHref?: string;
+    onSignOut?: () => void;
+    nameFrom?: 'sm' | 'lg';
+}): react.JSX.Element;
+interface ToolShellProps {
+    protocol: ProtocolSlug;
+    tools: readonly ToolItem[];
+    home?: string;
+    account?: ReactNode;
+    rail?: boolean;
+    railFooter?: ReactNode;
+    variant?: 'tool' | 'app';
+    banner?: ReactNode;
+    footer?: ReactNode | false;
+    children: ReactNode;
+}
+declare function ToolShell({ protocol, tools, home, account, rail, railFooter, variant, banner, footer, children, }: ToolShellProps): react.JSX.Element;
+
+export { AccountMenu as A, OCHK_APP_ACCOUNT as O, SessionAccountView as S, ThemeToggle as T, type AccountMenuItem as a, AppShell as b, type SessionState as c, type ShellNavGroup as d, type ShellNavItem as e, type ShellSection as f, ToolShell as g, type ToolShellProps as h };

package/dist/tools-BggNN5DV.d.ts

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Network } from './format.js';
+
+declare function ArtifactView({ content, title, filename, mime, defaultView, maxLines, className, }: {
+    content: string;
+    title?: ReactNode;
+    filename?: string;
+    mime?: string;
+    defaultView?: 'formatted' | 'raw';
+    maxLines?: number;
+    className?: string;
+}): react.JSX.Element;
+interface ChosenFile {
+    name: string;
+    size: number;
+    type?: string;
+}
+declare function DropZone({ onFile, onText, accept, title, hint, privacy, file, progress, progressLabel, onClear, error, disabled, className, }: {
+    onFile: (file: File) => void;
+    onText?: (text: string) => void;
+    accept?: string;
+    title?: ReactNode;
+    hint?: ReactNode;
+    privacy?: ReactNode;
+    file?: ChosenFile | null;
+    progress?: number | null;
+    progressLabel?: ReactNode;
+    onClear?: () => void;
+    error?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}): react.JSX.Element;
+type SectionStatus = 'done' | 'current' | 'upcoming' | 'blocked';
+declare function FormSection({ n, title, hint, status, action, as: Heading, id, children, className, }: {
+    n?: number;
+    title: ReactNode;
+    hint?: ReactNode;
+    status?: SectionStatus;
+    action?: ReactNode;
+    as?: 'h2' | 'h3';
+    id?: string;
+    children?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+type StateTone = 'good' | 'attention' | 'bad' | 'neutral' | 'quiet';
+declare function StateBadge({ tone, children, title, className, }: {
+    tone?: StateTone;
+    children: ReactNode;
+    title?: string;
+    className?: string;
+}): react.JSX.Element;
+interface StateDef {
+    label: string;
+    tone: StateTone;
+    hint?: string;
+}
+declare function createStateBadge<S extends string>(states: Record<S, StateDef>): ({ state, className }: {
+    state: S;
+    className?: string;
+}) => react.JSX.Element;
+declare function BlockHeight({ height, label, link, network, className, }: {
+    height: number;
+    label?: boolean;
+    link?: boolean;
+    network?: Network;
+    className?: string;
+}): react.JSX.Element;
+type AnchorState = 'anchored' | 'pending' | 'unverified' | 'none' | 'fail';
+declare function AnchorStatus({ state, blockHeight, blockTime, submittedAt, calendar, message, network, variant, className, }: {
+    state: AnchorState;
+    blockHeight?: number;
+    blockTime?: number | Date | string;
+    submittedAt?: number | Date | string;
+    calendar?: string;
+    message?: ReactNode;
+    network?: Network;
+    variant?: 'detail' | 'badge';
+    className?: string;
+}): react.JSX.Element;
+declare function BlockCountdown({ target, tip, from, reached, minutesPerBlock, network, className, }: {
+    target: number;
+    tip?: number | null;
+    from?: number;
+    reached?: string;
+    minutesPerBlock?: number;
+    network?: Network;
+    className?: string;
+}): react.JSX.Element;
+declare function Meter({ value, max, ghost, label, figure, tone, size, className, }: {
+    value: number;
+    max: number;
+    ghost?: number;
+    label: ReactNode;
+    figure?: ReactNode;
+    tone?: 'ink' | 'brand';
+    size?: 'md' | 'sm';
+    className?: string;
+}): react.JSX.Element;
+interface FilterOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    count?: number;
+}
+declare function FilterChips<T extends string>({ options, value, onChange, label, className, }: {
+    options: FilterOption<T>[];
+    label: string;
+    className?: string;
+} & ({
+    multiple?: false;
+    value: NoInfer<T>;
+    onChange: (v: NoInfer<T>) => void;
+} | {
+    multiple: true;
+    value: NoInfer<T>[];
+    onChange: (v: NoInfer<T>[]) => void;
+})): react.JSX.Element;
+interface ToolItem {
+    href: string;
+    label: string;
+    icon?: ReactNode;
+    description?: ReactNode;
+    active?: boolean;
+}
+declare function ToolGrid({ tools, as: Heading, className, }: {
+    tools: readonly ToolItem[];
+    as?: 'h2' | 'h3';
+    className?: string;
+}): react.JSX.Element;
+
+export { type AnchorState as A, BlockCountdown as B, type ChosenFile as C, DropZone as D, FilterChips as F, Meter as M, type SectionStatus as S, ToolGrid as T, AnchorStatus as a, ArtifactView as b, BlockHeight as c, type FilterOption as d, FormSection as e, StateBadge as f, type StateDef as g, type StateTone as h, type ToolItem as i, createStateBadge as j };

package/dist/tools-DFIxIj5p.d.mts

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Network } from './format.mjs';
+
+declare function ArtifactView({ content, title, filename, mime, defaultView, maxLines, className, }: {
+    content: string;
+    title?: ReactNode;
+    filename?: string;
+    mime?: string;
+    defaultView?: 'formatted' | 'raw';
+    maxLines?: number;
+    className?: string;
+}): react.JSX.Element;
+interface ChosenFile {
+    name: string;
+    size: number;
+    type?: string;
+}
+declare function DropZone({ onFile, onText, accept, title, hint, privacy, file, progress, progressLabel, onClear, error, disabled, className, }: {
+    onFile: (file: File) => void;
+    onText?: (text: string) => void;
+    accept?: string;
+    title?: ReactNode;
+    hint?: ReactNode;
+    privacy?: ReactNode;
+    file?: ChosenFile | null;
+    progress?: number | null;
+    progressLabel?: ReactNode;
+    onClear?: () => void;
+    error?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}): react.JSX.Element;
+type SectionStatus = 'done' | 'current' | 'upcoming' | 'blocked';
+declare function FormSection({ n, title, hint, status, action, as: Heading, id, children, className, }: {
+    n?: number;
+    title: ReactNode;
+    hint?: ReactNode;
+    status?: SectionStatus;
+    action?: ReactNode;
+    as?: 'h2' | 'h3';
+    id?: string;
+    children?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+type StateTone = 'good' | 'attention' | 'bad' | 'neutral' | 'quiet';
+declare function StateBadge({ tone, children, title, className, }: {
+    tone?: StateTone;
+    children: ReactNode;
+    title?: string;
+    className?: string;
+}): react.JSX.Element;
+interface StateDef {
+    label: string;
+    tone: StateTone;
+    hint?: string;
+}
+declare function createStateBadge<S extends string>(states: Record<S, StateDef>): ({ state, className }: {
+    state: S;
+    className?: string;
+}) => react.JSX.Element;
+declare function BlockHeight({ height, label, link, network, className, }: {
+    height: number;
+    label?: boolean;
+    link?: boolean;
+    network?: Network;
+    className?: string;
+}): react.JSX.Element;
+type AnchorState = 'anchored' | 'pending' | 'unverified' | 'none' | 'fail';
+declare function AnchorStatus({ state, blockHeight, blockTime, submittedAt, calendar, message, network, variant, className, }: {
+    state: AnchorState;
+    blockHeight?: number;
+    blockTime?: number | Date | string;
+    submittedAt?: number | Date | string;
+    calendar?: string;
+    message?: ReactNode;
+    network?: Network;
+    variant?: 'detail' | 'badge';
+    className?: string;
+}): react.JSX.Element;
+declare function BlockCountdown({ target, tip, from, reached, minutesPerBlock, network, className, }: {
+    target: number;
+    tip?: number | null;
+    from?: number;
+    reached?: string;
+    minutesPerBlock?: number;
+    network?: Network;
+    className?: string;
+}): react.JSX.Element;
+declare function Meter({ value, max, ghost, label, figure, tone, size, className, }: {
+    value: number;
+    max: number;
+    ghost?: number;
+    label: ReactNode;
+    figure?: ReactNode;
+    tone?: 'ink' | 'brand';
+    size?: 'md' | 'sm';
+    className?: string;
+}): react.JSX.Element;
+interface FilterOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    count?: number;
+}
+declare function FilterChips<T extends string>({ options, value, onChange, label, className, }: {
+    options: FilterOption<T>[];
+    label: string;
+    className?: string;
+} & ({
+    multiple?: false;
+    value: NoInfer<T>;
+    onChange: (v: NoInfer<T>) => void;
+} | {
+    multiple: true;
+    value: NoInfer<T>[];
+    onChange: (v: NoInfer<T>[]) => void;
+})): react.JSX.Element;
+interface ToolItem {
+    href: string;
+    label: string;
+    icon?: ReactNode;
+    description?: ReactNode;
+    active?: boolean;
+}
+declare function ToolGrid({ tools, as: Heading, className, }: {
+    tools: readonly ToolItem[];
+    as?: 'h2' | 'h3';
+    className?: string;
+}): react.JSX.Element;
+
+export { type AnchorState as A, BlockCountdown as B, type ChosenFile as C, DropZone as D, FilterChips as F, Meter as M, type SectionStatus as S, ToolGrid as T, AnchorStatus as a, ArtifactView as b, BlockHeight as c, type FilterOption as d, FormSection as e, StateBadge as f, type StateDef as g, type StateTone as h, type ToolItem as i, createStateBadge as j };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangecheck/app-design",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The ochk.app design system: tokens, type, the isometric check, halftone photography, primitives and app chrome. Its own system, scoped under data-oc-app=\"ochk\" so it never reaches the .ochk.io family sites.",
   "keywords": [
     "orangecheck",
@@ -60,6 +60,26 @@
       "import": "./dist/family.mjs",
       "require": "./dist/family.js"
     },
+    "./code": {
+      "types": "./dist/code.d.ts",
+      "import": "./dist/code.mjs",
+      "require": "./dist/code.js"
+    },
+    "./format": {
+      "types": "./dist/format.d.ts",
+      "import": "./dist/format.mjs",
+      "require": "./dist/format.js"
+    },
+    "./mdx": {
+      "types": "./dist/mdx.d.ts",
+      "import": "./dist/mdx.mjs",
+      "require": "./dist/mdx.js"
+    },
+    "./session": {
+      "types": "./dist/session.d.ts",
+      "import": "./dist/session.mjs",
+      "require": "./dist/session.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./styles/*": "./dist/styles/*"
   },
@@ -71,7 +91,7 @@
   "scripts": {
     "build": "tsup && yarn copy:css",
     "copy:css": "rm -rf dist/styles && mkdir -p dist/styles && cp src/styles.css dist/styles.css && cp -R src/styles/. dist/styles/",
-    "test": "node scripts/check-contrast.mjs && node scripts/check-isolation.mjs && node scripts/check-shell.mjs && node scripts/check-mirror.mjs",
+    "test": "node scripts/check-contrast.mjs && node scripts/check-isolation.mjs && node scripts/check-shell.mjs && node scripts/check-mirror.mjs && node scripts/check-code.mjs && node scripts/check-entries.mjs && node scripts/check-render.mjs",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist"
@@ -99,17 +119,26 @@
     "tailwind-merge": "^3.3.1"
   },
   "peerDependencies": {
+    "@orangecheck/auth-client": "^2.32.0",
     "lucide-react": ">=0.400.0",
     "next": "^15.0.0 || ^16.0.0",
     "next-themes": "^0.4.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@orangecheck/auth-client": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@orangecheck/auth-client": "^2.32.3",
+    "@orangecheck/auth-core": "^2.5.0",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "lucide-react": "^0.544.0",
+    "mermaid": "^11.14.0",
     "next": "^16.3.8",
     "next-themes": "^0.4.6",
     "react": "19.1.0",