@orangecheck/app-design 0.6.1 → 1.1.0

package/dist/styles/code.css

@@ -0,0 +1,97 @@
+/*
+ * @orangecheck/app-design — code.css
+ *
+ * Highlighted code: the token colours and the marked lines. Every rule sits
+ * inside .oca-code (a CodeBlock's dark well), because the syntax colours are
+ * measured against the well and would fail on a light surface.
+ */
+
+[data-oc-app='ochk'] .oca-code .oca-k,
+[data-oc-app='ochk'] .oca-code .oca-g {
+    color: var(--oca-code-keyword);
+}
+[data-oc-app='ochk'] .oca-code .oca-s {
+    color: var(--oca-code-string);
+}
+[data-oc-app='ochk'] .oca-code .oca-n {
+    color: var(--oca-code-number);
+}
+[data-oc-app='ochk'] .oca-code .oca-f,
+[data-oc-app='ochk'] .oca-code .oca-u {
+    color: var(--oca-code-function);
+}
+[data-oc-app='ochk'] .oca-code .oca-y {
+    color: var(--oca-code-type);
+}
+[data-oc-app='ochk'] .oca-code .oca-p {
+    color: var(--oca-code-property);
+}
+[data-oc-app='ochk'] .oca-code .oca-c {
+    color: var(--oca-code-comment);
+}
+
+/* One line per span, as wide as the widest line, so a mark runs edge to edge. */
+[data-oc-app='ochk'] .oca-code [data-line] {
+    position: relative;
+    display: inline-block;
+    min-width: 100%;
+    padding-inline: 1.25rem;
+}
+
+[data-oc-app='ochk'] .oca-code [data-mark] {
+    background: var(--oca-code-mark);
+    box-shadow: inset 2px 0 0 var(--oca-orange);
+}
+
+/* A diff: every line leaves room for its sign, so context stays aligned. */
+[data-oc-app='ochk'] .oca-code[data-diff] [data-line] {
+    padding-left: 2.25rem;
+}
+[data-oc-app='ochk'] .oca-code [data-diff='add'] {
+    background: var(--oca-code-added-line);
+}
+[data-oc-app='ochk'] .oca-code [data-diff='remove'] {
+    background: var(--oca-code-removed-line);
+}
+[data-oc-app='ochk'] .oca-code [data-diff]::after {
+    position: absolute;
+    left: 1rem;
+    user-select: none;
+}
+/* The sign is drawn, not written, so copying a line never picks it up.
+   Screen readers hear what it means. */
+[data-oc-app='ochk'] .oca-code [data-diff='add']::after {
+    content: '+';
+    content: '+' / 'Added: ';
+    color: var(--oca-code-added);
+}
+[data-oc-app='ochk'] .oca-code [data-diff='remove']::after {
+    content: '−';
+    content: '−' / 'Removed: ';
+    color: var(--oca-code-removed);
+}
+
+/* Line numbers: counted, drawn, never copied or read out. */
+[data-oc-app='ochk'] .oca-code[data-line-numbers] code {
+    counter-reset: oca-line;
+}
+[data-oc-app='ochk'] .oca-code[data-line-numbers] [data-line] {
+    padding-left: 3.25rem;
+}
+[data-oc-app='ochk'] .oca-code[data-line-numbers][data-diff] [data-line] {
+    padding-left: 4.5rem;
+}
+[data-oc-app='ochk'] .oca-code[data-line-numbers][data-diff] [data-diff]::after {
+    left: 3.25rem;
+}
+[data-oc-app='ochk'] .oca-code[data-line-numbers] [data-line]::before {
+    counter-increment: oca-line;
+    content: counter(oca-line);
+    content: counter(oca-line) / '';
+    position: absolute;
+    left: 0;
+    width: 2.25rem;
+    text-align: right;
+    color: var(--oca-code-comment);
+    user-select: none;
+}

package/dist/styles/fonts.css

@@ -3,7 +3,7 @@
  *
  * Inter (variable: weight + optical size) and JetBrains Mono, self-hosted from
  * @fontsource-variable 5.3.0, both SIL OFL 1.1. Optical size is what gives large
- * headlines the tight display cut in Sou's deck without a second family. The
+ * headlines the tight display cut of the ochk.app design (iteration 2) without a second family. The
  * family names are app-specific so a site's own next/font Inter cannot shadow them.
  */
 

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

@@ -1,7 +1,7 @@
 /*
  * @orangecheck/app-design — tokens.css
  *
- * Token values for ochk.app, measured from Sou's partner deck (2026-10-15) and
+ * Token values for ochk.app, measured from the ochk.app design (iteration 2, 2026-10-15) and
  * corrected where the deck fails contrast. Everything is scoped to
  * [data-oc-app='ochk'], so a family site that never sets the attribute never
  * sees a value from here. The :root form outranks a family skin's bare :root.
@@ -43,7 +43,9 @@
     --border: #ececec;
     /* A field's edge is how you find it: 3:1 against the card it sits on. */
     --input: #8f8f8f;
-    --ring: #f66d36;
+    /* A focus ring is a graphic that must stand out 3:1 (WCAG 1.4.11): #F66D36
+       is 2.81:1 on the canvas, so light mode rings in the deep orange. */
+    --ring: #ea580b;
 
     /* Status */
     --destructive: #c2262e;
@@ -85,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;
@@ -107,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;
@@ -166,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/tokens.d.mts

@@ -12,6 +12,7 @@ declare const appColors: {
         readonly hairlineStrong: "#DADADA";
         readonly accentDisplay: "#F55819";
         readonly accentInk: "#C73F09";
+        readonly ring: "#EA580B";
     };
     readonly dark: {
         readonly background: "#0A0A0A";
@@ -20,10 +21,11 @@ declare const appColors: {
         readonly muted: "#1E1E1E";
         readonly mutedForeground: "#A3A6AA";
         readonly subtleForeground: "#8B8E93";
-        readonly border: "#262626";
+        readonly border: "#2A2A2A";
         readonly hairlineStrong: "#333333";
         readonly accentDisplay: "#F66D36";
         readonly accentInk: "#F0835A";
+        readonly ring: "#F66D36";
     };
     readonly brand: {
         readonly orange: "#F66D36";

package/dist/tokens.d.ts

@@ -12,6 +12,7 @@ declare const appColors: {
         readonly hairlineStrong: "#DADADA";
         readonly accentDisplay: "#F55819";
         readonly accentInk: "#C73F09";
+        readonly ring: "#EA580B";
     };
     readonly dark: {
         readonly background: "#0A0A0A";
@@ -20,10 +21,11 @@ declare const appColors: {
         readonly muted: "#1E1E1E";
         readonly mutedForeground: "#A3A6AA";
         readonly subtleForeground: "#8B8E93";
-        readonly border: "#262626";
+        readonly border: "#2A2A2A";
         readonly hairlineStrong: "#333333";
         readonly accentDisplay: "#F66D36";
         readonly accentInk: "#F0835A";
+        readonly ring: "#F66D36";
     };
     readonly brand: {
         readonly orange: "#F66D36";

package/dist/tokens.js

@@ -14,7 +14,8 @@ var appColors = {
     border: "#ECECEC",
     hairlineStrong: "#DADADA",
     accentDisplay: "#F55819",
-    accentInk: "#C73F09"
+    accentInk: "#C73F09",
+    ring: "#EA580B"
   },
   dark: {
     background: "#0A0A0A",
@@ -23,10 +24,11 @@ var appColors = {
     muted: "#1E1E1E",
     mutedForeground: "#A3A6AA",
     subtleForeground: "#8B8E93",
-    border: "#262626",
+    border: "#2A2A2A",
     hairlineStrong: "#333333",
     accentDisplay: "#F66D36",
-    accentInk: "#F0835A"
+    accentInk: "#F0835A",
+    ring: "#F66D36"
   },
   brand: {
     orange: "#F66D36",

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,aAAA,GAAgB;AACtB,IAAM,MAAA,GAAS;AAEf,IAAM,SAAA,GAAY;AAAA,EACrB,KAAA,EAAO;AAAA,IACH,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACF,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,KAAA,EAAO;AAAA,IACH,MAAA,EAAQ,SAAA;AAAA,IACR,WAAA,EAAa,SAAA;AAAA,IACb,UAAA,EAAY,SAAA;AAAA,IACZ,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEjB;AAEO,IAAM,QAAA,GAAW;AAAA,EACpB,IAAA,EAAM,yEAAA;AAAA,EACN,IAAA,EAAM;AACV","file":"tokens.js","sourcesContent":["/*\n * The ochk.app palette as data, for places CSS variables cannot reach: OG\n * images, canvas, charts, email. Must match styles/tokens.css; the contrast\n * check reads both.\n */\nexport const APP_ATTRIBUTE = 'data-oc-app';\nexport const APP_ID = 'ochk';\n\nexport const appColors = {\n    light: {\n        background: '#FAFAFA',\n        foreground: '#0A0A0A',\n        card: '#FFFFFF',\n        muted: '#F2F2F2',\n        mutedForeground: '#54585E',\n        subtleForeground: '#686C72',\n        border: '#ECECEC',\n        hairlineStrong: '#DADADA',\n        accentDisplay: '#F55819',\n        accentInk: '#C73F09',\n    },\n    dark: {\n        background: '#0A0A0A',\n        foreground: '#FAFAFA',\n        card: '#161616',\n        muted: '#1E1E1E',\n        mutedForeground: '#A3A6AA',\n        subtleForeground: '#8B8E93',\n        border: '#262626',\n        hairlineStrong: '#333333',\n        accentDisplay: '#F66D36',\n        accentInk: '#F0835A',\n    },\n    brand: {\n        orange: '#F66D36',\n        orangeLight: '#FB933C',\n        orangeDeep: '#EA580B',\n        peach: '#FED8AB',\n        ink: '#0A0A0A',\n        inkCard: '#1E1E1E',\n    },\n} as const;\n\nexport const appFonts = {\n    sans: \"'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif\",\n    mono: \"'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace\",\n} as const;\n"]}
+{"version":3,"sources":["../src/tokens/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,aAAA,GAAgB;AACtB,IAAM,MAAA,GAAS;AAEf,IAAM,SAAA,GAAY;AAAA,EACrB,KAAA,EAAO;AAAA,IACH,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW,SAAA;AAAA,IACX,IAAA,EAAM;AAAA,GACV;AAAA,EACA,IAAA,EAAM;AAAA,IACF,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW,SAAA;AAAA,IACX,IAAA,EAAM;AAAA,GACV;AAAA,EACA,KAAA,EAAO;AAAA,IACH,MAAA,EAAQ,SAAA;AAAA,IACR,WAAA,EAAa,SAAA;AAAA,IACb,UAAA,EAAY,SAAA;AAAA,IACZ,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEjB;AAEO,IAAM,QAAA,GAAW;AAAA,EACpB,IAAA,EAAM,yEAAA;AAAA,EACN,IAAA,EAAM;AACV","file":"tokens.js","sourcesContent":["/*\n * The palette as data, for places CSS variables cannot reach: OG images,\n * canvas, charts, email. Every value must equal its variable in\n * styles/tokens.css; scripts/check-mirror.mjs fails the build when one drifts.\n */\nexport const APP_ATTRIBUTE = 'data-oc-app';\nexport const APP_ID = 'ochk';\n\nexport const appColors = {\n    light: {\n        background: '#FAFAFA',\n        foreground: '#0A0A0A',\n        card: '#FFFFFF',\n        muted: '#F2F2F2',\n        mutedForeground: '#54585E',\n        subtleForeground: '#686C72',\n        border: '#ECECEC',\n        hairlineStrong: '#DADADA',\n        accentDisplay: '#F55819',\n        accentInk: '#C73F09',\n        ring: '#EA580B',\n    },\n    dark: {\n        background: '#0A0A0A',\n        foreground: '#FAFAFA',\n        card: '#161616',\n        muted: '#1E1E1E',\n        mutedForeground: '#A3A6AA',\n        subtleForeground: '#8B8E93',\n        border: '#2A2A2A',\n        hairlineStrong: '#333333',\n        accentDisplay: '#F66D36',\n        accentInk: '#F0835A',\n        ring: '#F66D36',\n    },\n    brand: {\n        orange: '#F66D36',\n        orangeLight: '#FB933C',\n        orangeDeep: '#EA580B',\n        peach: '#FED8AB',\n        ink: '#0A0A0A',\n        inkCard: '#1E1E1E',\n    },\n} as const;\n\nexport const appFonts = {\n    sans: \"'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif\",\n    mono: \"'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace\",\n} as const;\n"]}

package/dist/tokens.mjs

@@ -12,7 +12,8 @@ var appColors = {
     border: "#ECECEC",
     hairlineStrong: "#DADADA",
     accentDisplay: "#F55819",
-    accentInk: "#C73F09"
+    accentInk: "#C73F09",
+    ring: "#EA580B"
   },
   dark: {
     background: "#0A0A0A",
@@ -21,10 +22,11 @@ var appColors = {
     muted: "#1E1E1E",
     mutedForeground: "#A3A6AA",
     subtleForeground: "#8B8E93",
-    border: "#262626",
+    border: "#2A2A2A",
     hairlineStrong: "#333333",
     accentDisplay: "#F66D36",
-    accentInk: "#F0835A"
+    accentInk: "#F0835A",
+    ring: "#F66D36"
   },
   brand: {
     orange: "#F66D36",

package/dist/tokens.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens/index.ts"],"names":[],"mappings":";AAKO,IAAM,aAAA,GAAgB;AACtB,IAAM,MAAA,GAAS;AAEf,IAAM,SAAA,GAAY;AAAA,EACrB,KAAA,EAAO;AAAA,IACH,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACF,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,KAAA,EAAO;AAAA,IACH,MAAA,EAAQ,SAAA;AAAA,IACR,WAAA,EAAa,SAAA;AAAA,IACb,UAAA,EAAY,SAAA;AAAA,IACZ,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEjB;AAEO,IAAM,QAAA,GAAW;AAAA,EACpB,IAAA,EAAM,yEAAA;AAAA,EACN,IAAA,EAAM;AACV","file":"tokens.mjs","sourcesContent":["/*\n * The ochk.app palette as data, for places CSS variables cannot reach: OG\n * images, canvas, charts, email. Must match styles/tokens.css; the contrast\n * check reads both.\n */\nexport const APP_ATTRIBUTE = 'data-oc-app';\nexport const APP_ID = 'ochk';\n\nexport const appColors = {\n    light: {\n        background: '#FAFAFA',\n        foreground: '#0A0A0A',\n        card: '#FFFFFF',\n        muted: '#F2F2F2',\n        mutedForeground: '#54585E',\n        subtleForeground: '#686C72',\n        border: '#ECECEC',\n        hairlineStrong: '#DADADA',\n        accentDisplay: '#F55819',\n        accentInk: '#C73F09',\n    },\n    dark: {\n        background: '#0A0A0A',\n        foreground: '#FAFAFA',\n        card: '#161616',\n        muted: '#1E1E1E',\n        mutedForeground: '#A3A6AA',\n        subtleForeground: '#8B8E93',\n        border: '#262626',\n        hairlineStrong: '#333333',\n        accentDisplay: '#F66D36',\n        accentInk: '#F0835A',\n    },\n    brand: {\n        orange: '#F66D36',\n        orangeLight: '#FB933C',\n        orangeDeep: '#EA580B',\n        peach: '#FED8AB',\n        ink: '#0A0A0A',\n        inkCard: '#1E1E1E',\n    },\n} as const;\n\nexport const appFonts = {\n    sans: \"'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif\",\n    mono: \"'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace\",\n} as const;\n"]}
+{"version":3,"sources":["../src/tokens/index.ts"],"names":[],"mappings":";AAKO,IAAM,aAAA,GAAgB;AACtB,IAAM,MAAA,GAAS;AAEf,IAAM,SAAA,GAAY;AAAA,EACrB,KAAA,EAAO;AAAA,IACH,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW,SAAA;AAAA,IACX,IAAA,EAAM;AAAA,GACV;AAAA,EACA,IAAA,EAAM;AAAA,IACF,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW,SAAA;AAAA,IACX,IAAA,EAAM;AAAA,GACV;AAAA,EACA,KAAA,EAAO;AAAA,IACH,MAAA,EAAQ,SAAA;AAAA,IACR,WAAA,EAAa,SAAA;AAAA,IACb,UAAA,EAAY,SAAA;AAAA,IACZ,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEjB;AAEO,IAAM,QAAA,GAAW;AAAA,EACpB,IAAA,EAAM,yEAAA;AAAA,EACN,IAAA,EAAM;AACV","file":"tokens.mjs","sourcesContent":["/*\n * The palette as data, for places CSS variables cannot reach: OG images,\n * canvas, charts, email. Every value must equal its variable in\n * styles/tokens.css; scripts/check-mirror.mjs fails the build when one drifts.\n */\nexport const APP_ATTRIBUTE = 'data-oc-app';\nexport const APP_ID = 'ochk';\n\nexport const appColors = {\n    light: {\n        background: '#FAFAFA',\n        foreground: '#0A0A0A',\n        card: '#FFFFFF',\n        muted: '#F2F2F2',\n        mutedForeground: '#54585E',\n        subtleForeground: '#686C72',\n        border: '#ECECEC',\n        hairlineStrong: '#DADADA',\n        accentDisplay: '#F55819',\n        accentInk: '#C73F09',\n        ring: '#EA580B',\n    },\n    dark: {\n        background: '#0A0A0A',\n        foreground: '#FAFAFA',\n        card: '#161616',\n        muted: '#1E1E1E',\n        mutedForeground: '#A3A6AA',\n        subtleForeground: '#8B8E93',\n        border: '#2A2A2A',\n        hairlineStrong: '#333333',\n        accentDisplay: '#F66D36',\n        accentInk: '#F0835A',\n        ring: '#F66D36',\n    },\n    brand: {\n        orange: '#F66D36',\n        orangeLight: '#FB933C',\n        orangeDeep: '#EA580B',\n        peach: '#FED8AB',\n        ink: '#0A0A0A',\n        inkCard: '#1E1E1E',\n    },\n} as const;\n\nexport const appFonts = {\n    sans: \"'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif\",\n    mono: \"'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace\",\n} as const;\n"]}

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 };