@orangecheck/app-design 1.0.0 → 1.1.1

package/README.md

@@ -28,14 +28,30 @@ family `OcThemeProvider` on the same page: it writes `data-oc-theme` and the sha
 | Entry | What |
 |---|---|
 | `/brand` | `Mark`, `AppIcon`, `Lockup`, `IsoCheck`, `HalftoneSphere` |
-| `/primitives` | `Button`, `Badge`, `Card`, form controls, `Dialog`, `Sheet`, `Popover`, `Tooltip`, `DropdownMenu`, `Tabs`, `Toaster` |
-| `/components` | `Display`, `Eyebrow`, `Section`, `StepGrid`, `PackageCard`, `TruthTable`, `Sats`, `DataTable`, `Notice`, `ProgressSteps`, `ErrorPage`, the public page blocks (`SectionHeading`, `FactBlock`, `ProofStrip`, `Closing`, `LegalDocument` …) and the protocol page blocks (`ProtocolGrid`, `AppGrid`, `ProtocolHero`, `SpecCard`, `VerifyBox`, `ComparisonTable`, `VerifyReport`, `SignMessage`) |
-| `/chrome` | `SiteHeader`, `SiteFooter`, `FamilyMenu`, `SkipLink`, `SiteBanner`, `SignInFrame`, `AppShell`, `AccountMenu`, `ThemeToggle` |
+| `/primitives` | `Button`, `Badge`, `Card`, form controls (`Input size="sm"` for tools), `Dialog`, `Sheet`, `Popover`, `Tooltip`, `DropdownMenu`, `Tabs`, `Toaster`, `DensityProvider` |
+| `/components` | `Display`, `Eyebrow`, `Section`, `StepGrid`, `PackageCard`, `TruthTable`, `Sats`, `DataTable`, `Notice`, `ProgressSteps`, `ErrorPage`, the public page blocks (`SectionHeading`, `FactBlock`, `ProofStrip`, `Closing`, `LegalDocument` …), the protocol page blocks (`ProtocolGrid`, `AppGrid`, `ProtocolHero`, `SpecCard`, `VerifyBox`, `ComparisonTable`, `VerifyReport`, `SignMessage`), code (`CodeBlock`, `CodeTabs`, `InstallTabs`), the docs blocks (`Breadcrumbs`, `DocsPager`, `OnThisPage`, `Callout`, `Steps`, `LinkCard`, `ApiTable`, `Diagram`, `SearchDialog`) and the tool parts (`ArtifactView`, `DropZone`, `FormSection`, `StateBadge`, `AnchorStatus`, `BlockHeight`, `BlockCountdown`, `Meter`, `FilterChips`, `ToolGrid`) |
+| `/chrome` | `SiteHeader`, `SiteFooter`, `FamilyMenu`, `SkipLink`, `SiteBanner`, `SignInFrame`, `AppShell`, `AccountMenu`, `ThemeToggle`, `DocsShell`, `DocsNav`, `ToolShell`, `SessionAccountView` |
+| `/mdx` | `mdxComponents` and `createMdxComponents({ mermaid })`: markdown in the system's type |
+| `/code` | `rehypeCode` (highlights fences at build time), `highlight`, `highlightToHtml`; no React |
+| `/format` | `explorerUrl`, `shortenMiddle`, `formatBlockHeight`, `blocksToDuration`, `formatUtc`, `formatBytes`; no React |
+| `/session` | `SessionAccount`, read from `@orangecheck/auth-client` (an optional peer: install it to use this entry) |
 | `/family` | every public site as data (`FAMILY`, `PROTOCOLS`, `OCHK_IO_NAV`, `LEGAL_LINKS`); no React |
 | `/tokens` | the palette as data, for OG images and charts |
 
-`yarn test` fails if any text token drops under WCAG AA in light or dark, or if a
-rule could match without the attribute. `scripts/halftone.py` turns any photo into
+Docs written in MDX get highlighted code from the build and the system's type:
+
+```ts
+// next.config.ts
+import { rehypeCode } from '@orangecheck/app-design/code';
+const withMDX = createMDX({ options: { rehypePlugins: [rehypeCode] } });
+
+// _app.tsx: <MDXProvider components={createMdxComponents({ mermaid: () => import('mermaid') })}>
+```
+
+`yarn test` fails if any text token (the syntax colours included) drops under WCAG
+AA in light or dark, if a rule could match without the attribute, if the
+highlighter changes a character of the code it colours, or if a component stops
+doing what its story shows. `scripts/halftone.py` turns any photo into
 the dot layer of a `HalftoneSphere`.
 
 MIT © OrangeCheck. Inter and JetBrains Mono are SIL OFL 1.1.

package/dist/chrome.d.mts

@@ -1,6 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { e as FooterColumn, d as FamilySlug, N as NavItem } from './index-C6hDqOOS.mjs';
+import { T as TocItem } from './hero-Dn37il-9.mjs';
+import { a as Status } from './status-badge-DRwGhB0h.mjs';
+export { A as AccountMenu, a as AccountMenuItem, b as AppShell, O as OCHK_APP_ACCOUNT, S as SessionAccountView, c as SessionState, d as ShellNavGroup, e as ShellNavItem, f as ShellSection, T as ThemeToggle, g as ToolShell, h as ToolShellProps } from './tool-shell-BDx_N5ai.mjs';
+import './tools-DFIxIj5p.mjs';
+import './format.mjs';
 
 interface SiteHeaderProps {
     home?: string;
@@ -11,9 +16,11 @@ interface SiteHeaderProps {
     search?: ReactNode;
     actions?: ReactNode;
     variant?: 'site' | 'tool';
+    navOnPhone?: boolean;
+    menu?: ReactNode;
     className?: string;
 }
-declare function SiteHeader({ home, brand, product, family, nav, search, actions, variant, className, }: SiteHeaderProps): react.JSX.Element;
+declare function SiteHeader({ home, brand, product, family, nav, search, actions, variant, navOnPhone, menu: menuExtra, className, }: SiteHeaderProps): react.JSX.Element;
 declare function SkipLink({ href, children }: {
     href?: string;
     children?: ReactNode;
@@ -60,53 +67,35 @@ declare function SignInFrame({ title, lead, children, error, fineprint, brand, h
     className?: string;
 }): react.JSX.Element;
 
-interface ShellNavItem {
+interface DocsNavItem {
     href: string;
-    label: string;
-    icon?: ReactNode;
-    active?: boolean;
-    badge?: ReactNode;
-}
-interface ShellNavGroup {
-    label?: string;
-    items: ShellNavItem[];
+    label: ReactNode;
+    badge?: Status | ReactNode;
 }
-interface ShellSection {
-    id: string;
+interface DocsNavSection {
     label: string;
-    title?: string;
-    href: string;
-    groups: ShellNavGroup[];
+    items: DocsNavItem[];
 }
-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;
+declare function DocsNav({ sections, current, onNavigate, className, }: {
+    sections: readonly DocsNavSection[];
+    current: string;
+    onNavigate?: () => void;
     className?: string;
 }): react.JSX.Element;
-interface AccountMenuItem {
-    label: string;
-    href?: string;
-    onSelect?: () => void;
-    icon?: ReactNode;
-    destructive?: boolean;
+declare const DOCS_HEADER_NAV: readonly NavItem[];
+interface DocsShellProps {
+    nav: readonly DocsNavSection[];
+    current: string;
+    header?: ReactNode;
+    search?: ReactNode;
+    actions?: ReactNode;
+    breadcrumbs?: ReactNode;
+    toc?: TocItem[];
+    pager?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
 }
-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;
+declare function DocsShell({ nav, current, header, search, actions, breadcrumbs, toc, pager, footer, children, }: DocsShellProps): react.JSX.Element;
 
 interface ShellPlace {
     section?: string;
@@ -115,4 +104,4 @@ interface ShellPlace {
 declare const ShellContext: react.Context<ShellPlace>;
 declare function useShellPlace(): ShellPlace;
 
-export { AccountMenu, type AccountMenuItem, AppShell, FamilyMenu, FooterColumn, NavItem, ShellContext, type ShellNavGroup, type ShellNavItem, type ShellPlace, type ShellSection, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, ThemeToggle, useShellPlace };
+export { DOCS_HEADER_NAV, DocsNav, type DocsNavItem, type DocsNavSection, DocsShell, type DocsShellProps, FamilyMenu, FooterColumn, NavItem, ShellContext, type ShellPlace, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, useShellPlace };

package/dist/chrome.d.ts

@@ -1,6 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { e as FooterColumn, d as FamilySlug, N as NavItem } from './index-C6hDqOOS.js';
+import { T as TocItem } from './hero-Dn37il-9.js';
+import { a as Status } from './status-badge-BEOxeY9j.js';
+export { A as AccountMenu, a as AccountMenuItem, b as AppShell, O as OCHK_APP_ACCOUNT, S as SessionAccountView, c as SessionState, d as ShellNavGroup, e as ShellNavItem, f as ShellSection, T as ThemeToggle, g as ToolShell, h as ToolShellProps } from './tool-shell-B1C7ahKE.js';
+import './tools-BggNN5DV.js';
+import './format.js';
 
 interface SiteHeaderProps {
     home?: string;
@@ -11,9 +16,11 @@ interface SiteHeaderProps {
     search?: ReactNode;
     actions?: ReactNode;
     variant?: 'site' | 'tool';
+    navOnPhone?: boolean;
+    menu?: ReactNode;
     className?: string;
 }
-declare function SiteHeader({ home, brand, product, family, nav, search, actions, variant, className, }: SiteHeaderProps): react.JSX.Element;
+declare function SiteHeader({ home, brand, product, family, nav, search, actions, variant, navOnPhone, menu: menuExtra, className, }: SiteHeaderProps): react.JSX.Element;
 declare function SkipLink({ href, children }: {
     href?: string;
     children?: ReactNode;
@@ -60,53 +67,35 @@ declare function SignInFrame({ title, lead, children, error, fineprint, brand, h
     className?: string;
 }): react.JSX.Element;
 
-interface ShellNavItem {
+interface DocsNavItem {
     href: string;
-    label: string;
-    icon?: ReactNode;
-    active?: boolean;
-    badge?: ReactNode;
-}
-interface ShellNavGroup {
-    label?: string;
-    items: ShellNavItem[];
+    label: ReactNode;
+    badge?: Status | ReactNode;
 }
-interface ShellSection {
-    id: string;
+interface DocsNavSection {
     label: string;
-    title?: string;
-    href: string;
-    groups: ShellNavGroup[];
+    items: DocsNavItem[];
 }
-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;
+declare function DocsNav({ sections, current, onNavigate, className, }: {
+    sections: readonly DocsNavSection[];
+    current: string;
+    onNavigate?: () => void;
     className?: string;
 }): react.JSX.Element;
-interface AccountMenuItem {
-    label: string;
-    href?: string;
-    onSelect?: () => void;
-    icon?: ReactNode;
-    destructive?: boolean;
+declare const DOCS_HEADER_NAV: readonly NavItem[];
+interface DocsShellProps {
+    nav: readonly DocsNavSection[];
+    current: string;
+    header?: ReactNode;
+    search?: ReactNode;
+    actions?: ReactNode;
+    breadcrumbs?: ReactNode;
+    toc?: TocItem[];
+    pager?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
 }
-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;
+declare function DocsShell({ nav, current, header, search, actions, breadcrumbs, toc, pager, footer, children, }: DocsShellProps): react.JSX.Element;
 
 interface ShellPlace {
     section?: string;
@@ -115,4 +104,4 @@ interface ShellPlace {
 declare const ShellContext: react.Context<ShellPlace>;
 declare function useShellPlace(): ShellPlace;
 
-export { AccountMenu, type AccountMenuItem, AppShell, FamilyMenu, FooterColumn, NavItem, ShellContext, type ShellNavGroup, type ShellNavItem, type ShellPlace, type ShellSection, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, ThemeToggle, useShellPlace };
+export { DOCS_HEADER_NAV, DocsNav, type DocsNavItem, type DocsNavSection, DocsShell, type DocsShellProps, FamilyMenu, FooterColumn, NavItem, ShellContext, type ShellPlace, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, useShellPlace };