@orangecheck/app-design 1.6.2 → 1.8.0

package/dist/styles/swagger.css

@@ -206,11 +206,34 @@
 }
 
 /* Swagger UI sets its fields to 12-14px at a specificity that beats the system's
-   16px phone floor, so iOS zoomed on every focus. One class more wins here. */
+   16px phone floor, so iOS zoomed on every focus. One class more wins here.
+   Its collapse arrows, the operation lock and the models toggle are 20-30px
+   targets; on a phone each reaches 44px, the glyphs unchanged. */
 @media (width < 48rem) {
     [data-oc-app='ochk'] .swagger-ui :is(input:not([type='checkbox'], [type='radio'], [type='file'], [type='hidden']), select, textarea) {
         font-size: 16px;
     }
+    [data-oc-app='ochk'] .swagger-ui :is(.expand-operation, .expand-methods, .opblock-control-arrow, .authorization__btn, .models-control) {
+        min-width: 44px;
+        min-height: 44px;
+    }
+}
+
+/* The operation lock drew at 40% black when open: 2.8:1 on a tinted row in
+   light, 1.1:1 in dark. It takes the muted ink in both modes, open or shut;
+   the glyph says which. A parameter's place ("path") was grey at 3.5:1 and
+   "required" a 60% red; both take the system's inks. */
+[data-oc-app='ochk'] .swagger-ui .authorization__btn svg {
+    fill: var(--muted-foreground);
+    opacity: 1;
+}
+[data-oc-app='ochk'] .swagger-ui .parameter__in,
+[data-oc-app='ochk'] .swagger-ui .parameter__extension {
+    color: var(--muted-foreground);
+}
+[data-oc-app='ochk'] .swagger-ui .parameter__name.required span,
+[data-oc-app='ochk'] .swagger-ui .parameter__name.required::after {
+    color: var(--destructive);
 }
 
 /* Swagger's method badges put white text on light fills (GET 2.3:1, POST 2.0:1,

package/dist/styles/tokens.css

@@ -81,6 +81,10 @@
     --oca-chart-up: var(--success);
     --oca-chart-down: var(--destructive);
     --oca-chart-grid: var(--border);
+    /* Avatar: a person's tint, its hue from their seed, its lightness from the
+       mode. check-contrast holds the initials to AA at every hue. */
+    --oca-avatar-bg-l: 90%;
+    --oca-avatar-fg-l: 28%;
     --oca-sphere-from: #ff6f33;
     --oca-sphere-to: #ffd9c4;
     --oca-outline: #f2cfc3;
@@ -138,6 +142,11 @@
     --oc-signin-strong: 500;
     /* Sentence-case labels carry no trailing arrow (auth-client ≥ 2.29). */
     --oc-signin-arrow: none;
+    /* Role sizes for the ceremony (auth-client ≥ 2.33.4): app-design's body, hint, label and button sizes. */
+    --oc-signin-text-size: 0.9375rem;
+    --oc-signin-hint-size: 0.8125rem;
+    --oc-signin-label-size: 0.875rem;
+    --oc-signin-button-size: 0.9375rem;
 
     /* The wallet picker and sign button (@orangecheck/wallet-adapter's
        OcWalletPicker and OcWalletButton) in this design, read the same way:
@@ -219,6 +228,8 @@
     --oca-chart-3: #f9a8d4;
     --oca-chart-4: #fde047;
     --oca-chart-neutral: #62676e;
+    --oca-avatar-bg-l: 22%;
+    --oca-avatar-fg-l: 82%;
     --oca-outline: #3a2a24;
     /* In dark the ink band lifts off the canvas, so the deck's rhythm survives. */
     --oca-ink: #171717;

package/dist/{tool-shell-CQZNRUgH.d.mts → tool-shell-Cg51cRHJ.d.ts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { i as ToolItem } from './tools-Bg1gi2HO.mjs';
-import { d as FamilySlug, j as ProtocolSlug } from './index-DmfyPYe5.mjs';
+import { i as ToolItem } from './tools-CzjFPng4.js';
+import { d as FamilySlug, k as ProtocolSlug } from './index-Bkl49Vgy.js';
 
 interface ShellNavItem {
     href: string;
@@ -46,6 +46,10 @@ interface AccountMenuItem {
     icon?: ReactNode;
     destructive?: boolean;
 }
+declare function PaneHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
 declare function AccountMenu({ name, detail, items, nameFrom, }: {
     name: string;
     detail?: string;
@@ -71,6 +75,11 @@ declare function SessionAccountView({ state, name, detail, items, signInHref, si
     onSignOut?: () => void;
     nameFrom?: 'sm' | 'lg';
 }): react.JSX.Element;
+declare function ToolColumn({ measure, className, children, }: {
+    measure?: 'wide' | 'narrow';
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
 interface ToolShellProps {
     protocol: ProtocolSlug;
     tools: readonly ToolItem[];
@@ -79,10 +88,11 @@ interface ToolShellProps {
     rail?: boolean;
     railFooter?: ReactNode;
     variant?: 'tool' | 'app';
+    measure?: 'wide' | 'narrow';
     banner?: ReactNode;
     footer?: ReactNode | false;
     children: ReactNode;
 }
-declare function ToolShell({ protocol, tools, home, account, rail, railFooter, variant, banner, footer, children, }: ToolShellProps): react.JSX.Element;
+declare function ToolShell({ protocol, tools, home, account, rail, railFooter, variant, measure, 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 AppShellProps as c, type SessionState as d, type ShellNavGroup as e, type ShellNavItem as f, type ShellSection as g, ToolShell as h, type ToolShellProps as i, useSignInHref as u };
+export { AccountMenu as A, OCHK_APP_ACCOUNT as O, PaneHeader as P, SessionAccountView as S, ThemeToggle as T, type AccountMenuItem as a, AppShell as b, type AppShellProps as c, type SessionState as d, type ShellNavGroup as e, type ShellNavItem as f, type ShellSection as g, ToolColumn as h, ToolShell as i, type ToolShellProps as j, useSignInHref as u };

package/dist/{tool-shell-CRmceGrV.d.ts → tool-shell-Dxw5o2rH.d.mts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { i as ToolItem } from './tools-Bw7RhO92.js';
-import { d as FamilySlug, j as ProtocolSlug } from './index-DmfyPYe5.js';
+import { i as ToolItem } from './tools-CKO8IseL.mjs';
+import { d as FamilySlug, k as ProtocolSlug } from './index-Bkl49Vgy.mjs';
 
 interface ShellNavItem {
     href: string;
@@ -46,6 +46,10 @@ interface AccountMenuItem {
     icon?: ReactNode;
     destructive?: boolean;
 }
+declare function PaneHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
 declare function AccountMenu({ name, detail, items, nameFrom, }: {
     name: string;
     detail?: string;
@@ -71,6 +75,11 @@ declare function SessionAccountView({ state, name, detail, items, signInHref, si
     onSignOut?: () => void;
     nameFrom?: 'sm' | 'lg';
 }): react.JSX.Element;
+declare function ToolColumn({ measure, className, children, }: {
+    measure?: 'wide' | 'narrow';
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
 interface ToolShellProps {
     protocol: ProtocolSlug;
     tools: readonly ToolItem[];
@@ -79,10 +88,11 @@ interface ToolShellProps {
     rail?: boolean;
     railFooter?: ReactNode;
     variant?: 'tool' | 'app';
+    measure?: 'wide' | 'narrow';
     banner?: ReactNode;
     footer?: ReactNode | false;
     children: ReactNode;
 }
-declare function ToolShell({ protocol, tools, home, account, rail, railFooter, variant, banner, footer, children, }: ToolShellProps): react.JSX.Element;
+declare function ToolShell({ protocol, tools, home, account, rail, railFooter, variant, measure, 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 AppShellProps as c, type SessionState as d, type ShellNavGroup as e, type ShellNavItem as f, type ShellSection as g, ToolShell as h, type ToolShellProps as i, useSignInHref as u };
+export { AccountMenu as A, OCHK_APP_ACCOUNT as O, PaneHeader as P, SessionAccountView as S, ThemeToggle as T, type AccountMenuItem as a, AppShell as b, type AppShellProps as c, type SessionState as d, type ShellNavGroup as e, type ShellNavItem as f, type ShellSection as g, ToolColumn as h, ToolShell as i, type ToolShellProps as j, useSignInHref as u };

package/dist/{tools-Bg1gi2HO.d.mts → tools-CKO8IseL.d.mts}

@@ -97,12 +97,12 @@ declare function Meter({ value, max, ghost, label, figure, tone, size, className
     size?: 'md' | 'sm';
     className?: string;
 }): react.JSX.Element;
-interface FilterOption<T extends string> {
+interface FilterOption<T extends string | number> {
     value: T;
     label: ReactNode;
     count?: number;
 }
-declare function FilterChips<T extends string>({ options, value, onChange, label, className, }: {
+declare function FilterChips<T extends string | number>({ options, value, onChange, label, className, }: {
     options: FilterOption<T>[];
     label: string;
     className?: string;

package/dist/{tools-Bw7RhO92.d.ts → tools-CzjFPng4.d.ts}

@@ -97,12 +97,12 @@ declare function Meter({ value, max, ghost, label, figure, tone, size, className
     size?: 'md' | 'sm';
     className?: string;
 }): react.JSX.Element;
-interface FilterOption<T extends string> {
+interface FilterOption<T extends string | number> {
     value: T;
     label: ReactNode;
     count?: number;
 }
-declare function FilterChips<T extends string>({ options, value, onChange, label, className, }: {
+declare function FilterChips<T extends string | number>({ options, value, onChange, label, className, }: {
     options: FilterOption<T>[];
     label: string;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangecheck/app-design",
-  "version": "1.6.2",
+  "version": "1.8.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",
@@ -91,7 +91,7 @@
   "scripts": {
     "build": "node scripts/gen-palette.mjs && 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 && node scripts/check-code.mjs && node scripts/check-entries.mjs && node scripts/check-render.mjs && node scripts/check-dom.mjs && node scripts/check-layout.mjs && node scripts/check-next.mjs",
+    "test": "node scripts/check-contrast.mjs && node scripts/check-swagger.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 && node scripts/check-dom.mjs && node scripts/check-layout.mjs && node scripts/check-next.mjs",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist"