@inspectorhub/field-ui 0.0.0-stage → 0.1.0

package/dist/theme.css

@@ -0,0 +1,370 @@
+/* ============================================================
+   Design System 0523 — theme layer shared by the web app and the
+   embeddable field editor package.
+
+   Single source of truth for the colour, radius, shadow and type tokens the
+   editor (and the shared-ui primitives bundled into it) paint with, the three
+   colour schemes (light, dark, field), and the few `.ih-*` classes those
+   components use. The web app imports this file from app/styles/tailwind.css;
+   a host application imports it after `@import "tailwindcss"` and adds
+   `@source` for the package (see the package README).
+
+   App-only tokens (agent portal accent, sidebar widths, the list spacing
+   step) and app-only classes stay in app/styles/tailwind.css.
+   ============================================================ */
+
+@theme {
+  /* ── Primary palette ── */
+  --color-ih-primary: var(--ih-primary);
+  --color-ih-primary-600: var(--ih-primary-600);
+  --color-ih-primary-700: var(--ih-primary-700);
+  --color-ih-primary-tint: var(--ih-primary-tint);
+  --color-ih-primary-glow: var(--ih-primary-glow);
+  /* Readable foreground for content on `bg-ih-primary`. brandTokens() re-points
+     it per tenant by measuring both candidate WCAG ratios, so a bright brand
+     color flips to dark text.
+
+     NO FALLBACK, deliberately. This read `var(--ih-primary-fg, #ffffff)` and
+     `--ih-primary-fg` was declared in no theme block at all, so every
+     deployment without a tenant brand colour painted white — 4.53:1 on the light
+     primary, but 2.98:1 on the dark and field one, which is what the dark
+     primary buttons and active tab pills actually rendered. A fallback here is
+     strictly worse than none: it is one fixed colour answering a question that
+     has three per-theme answers, and because the token itself resolved to
+     nothing, `lint:contrast` read every call site as unmeasurable and skipped 78
+     of them in silence. The three theme blocks below are now the only source;
+     `checkAliasDefinitions` in scripts/lib/palette-invariants.mjs fails the gate
+     if one of them goes missing again. */
+  --color-ih-primary-fg: var(--ih-primary-fg);
+  /* The brand as TEXT — a different role from the brand as FILL. A tenant's
+     "my colour" means buttons and accent bars, and `--ih-primary` keeps their
+     exact hex for those; this one may move along the lightness axis until it
+     clears 4.5:1 on the card, because 63.6% of sRGB fails AA as text on white
+     and one token cannot promise both fidelity and readability. Glyphs take
+     `text-ih-primary-text`; `text-ih-primary` is only for a brand FILL
+     (e.g. a checkbox accent). */
+  --color-ih-primary-text: var(--ih-primary-text);
+
+  /* ── Foreground / text ── */
+  --color-ih-fg-1: var(--ih-fg-1);
+  --color-ih-fg-2: var(--ih-fg-2);
+  --color-ih-fg-3: var(--ih-fg-3);
+  --color-ih-fg-4: var(--ih-fg-4);
+  --color-ih-fg-5: var(--ih-fg-5);
+  --color-ih-fg-inverse: var(--ih-fg-inverse);
+
+  /* ── Background / surface ── */
+  --color-ih-bg-app: var(--ih-bg-app);
+  --color-ih-bg-card: var(--ih-bg-card);
+  --color-ih-bg-muted: var(--ih-bg-muted);
+  --color-ih-bg-inverse: var(--ih-bg-inverse);
+
+  /* ── Status / semantic ── */
+  --color-ih-ok: var(--ih-status-ok);
+  --color-ih-ok-bg: var(--ih-status-ok-bg);
+  --color-ih-ok-fg: var(--ih-status-ok-fg);
+  --color-ih-watch: var(--ih-status-watch);
+  --color-ih-watch-bg: var(--ih-status-watch-bg);
+  --color-ih-watch-fg: var(--ih-status-watch-fg);
+  --color-ih-bad: var(--ih-status-bad);
+  --color-ih-bad-bg: var(--ih-status-bad-bg);
+  --color-ih-bad-fg: var(--ih-status-bad-fg);
+  --color-ih-info: var(--ih-status-info);
+  --color-ih-info-bg: var(--ih-status-info-bg);
+  --color-ih-info-fg: var(--ih-status-info-fg);
+
+  /* ── Borders / shadows ── */
+  --color-ih-border: var(--ih-border-color, #e2e8f0);
+  --color-ih-border-strong: var(--ih-border-strong-color, #cbd5e1);
+
+  /* ── Overlay backdrop (single source for every modal/drawer scrim) ── */
+  --color-ih-backdrop: var(--ih-backdrop);
+
+  /* ── Radii (semantic; do not use raw rounded-md/lg/xl in primitives) ── */
+  --radius-ih-button: 6px;
+  --radius-ih-input: 8px;
+  --radius-ih-card: 8px;
+  --radius-ih-modal: 12px;
+  --radius-ih-pill: 4px;
+
+  /* ── Spacing scale extensions (established rhythms) ── */
+  --spacing-ih-card: 14px;   /* compact card padding */
+
+  /* ── Shadows ── */
+  --shadow-ih-card: 0 1px 3px rgba(15, 23, 42, 0.08);
+  --shadow-ih-popover: 0 8px 32px rgba(15, 23, 42, 0.12);
+  --shadow-ih-focus: 0 0 0 3px var(--ih-primary-glow);
+
+  /* ── Font families ── */
+  --font-ih-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
+  --font-ih-body: "Inter", system-ui, sans-serif;
+  --font-ih-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+/* ── CSS custom properties: light mode (default) ── */
+:root {
+  /* #6366f1 (indigo-500) measured 4.47:1 on the white card — 0.03 short, and
+     symmetric, so the same 4.47 governed an indigo link AND white label text
+     on a filled indigo button. #6265f0 is one step of 1/255 per channel and
+     measures 4.53:1: below the threshold of vision, a correctness fix rather
+     than a visual one, and it retires 193 `lint:contrast` reports. */
+  --ih-primary: #6265f0;
+  --ih-primary-600: #4f46e5;
+  --ih-primary-700: #4338ca;
+  --ih-primary-tint: rgba(99, 102, 241, 0.10);
+  --ih-primary-glow: rgba(99, 102, 241, 0.25);
+  /* Equal to --ih-primary because the fixed default already clears 4.5:1 on
+     --ih-bg-card; a tenant colour that does not is moved down the lightness
+     axis by brandTokens() until it does. */
+  --ih-primary-text: #6265f0;
+  /* Text ON the primary fill. White measures 4.53:1 on #6265f0 here; #0f172a
+     would be 3.94:1, so light is the one theme where white is the right answer —
+     which is exactly why the old fixed `#ffffff` fallback looked correct. */
+  --ih-primary-fg: #ffffff;
+
+  --ih-fg-1: #0f172a;
+  --ih-fg-2: #475569;
+  --ih-fg-3: #64748b;
+  --ih-fg-4: #94a3b8;
+  --ih-fg-5: #cbd5e1;
+  --ih-fg-inverse: #fff;
+
+  /* Tells the BROWSER which palette to paint its own controls with: the
+     expanded <option> list, autofill highlight, scrollbars, date pickers,
+     spinners. Those are rendered by the UA, not by us, so no amount of
+     Tailwind reaches them — without this they stay light in every theme, which
+     is why a dark-mode select looked fine closed and became dark-on-dark the
+     moment it opened. `data-color-scheme` below is our ATTRIBUTE for swapping
+     tokens; this is the CSS PROPERTY that talks to the browser. Two different
+     things that read almost identically, which is how it went unnoticed. */
+  color-scheme: light;
+
+  --ih-bg-app: #f8fafc;
+  --ih-bg-card: #fff;
+  --ih-bg-muted: #f1f5f9;
+  --ih-bg-inverse: #0f172a;
+
+  --ih-status-ok: #10b981;
+  --ih-status-ok-bg: #ecfdf5;
+  --ih-status-ok-fg: #047857;
+  --ih-status-watch: #f59e0b;
+  --ih-status-watch-bg: #fffbeb;
+  --ih-status-watch-fg: #b45309;
+  /* red-600, not red-500. `--ih-status-bad` is a FILL: five destructive
+     buttons put white text on it, and on #ef4444 that is 3.76:1. #dc2626
+     measures 4.83:1. This one IS visible — a deeper red — and is deliberate;
+     a danger colour that cannot carry its own label is not a danger colour. */
+  --ih-status-bad: #dc2626;
+  --ih-status-bad-bg: #fef2f2;
+  --ih-status-bad-fg: #be123c;
+  --ih-status-info: #0ea5e9;
+  --ih-status-info-bg: #f0f9ff;
+  --ih-status-info-fg: #0369a1;
+
+  --ih-border-color: #e2e8f0;
+  --ih-border-strong-color: #cbd5e1;
+
+  --ih-backdrop: rgba(15, 23, 42, 0.55);
+}
+
+/* ── Dark mode (the 'field' scheme is dark-based and inherits these vars) ── */
+html[data-color-scheme="dark"], html[data-color-scheme="field"], .dark {
+  /* See the note in :root — this is what makes native controls dark. */
+  color-scheme: dark;
+  --ih-primary: #818cf8;
+  --ih-primary-600: #6366f1;
+  --ih-primary-700: #4f46e5;
+  --ih-primary-tint: rgba(129, 140, 248, 0.10);
+  --ih-primary-glow: rgba(129, 140, 248, 0.25);
+  /* 4.90:1 on the dark card — already clears, so text and fill agree here.
+     The derivation's direction reverses in dark: a failing brand colour is
+     moved UP the lightness axis, not down. */
+  --ih-primary-text: #818cf8;
+  /* The fill is LIGHTER here (#818cf8), so the readable foreground flips to
+     near-black: 5.98:1, against 2.98:1 for white. Same value and same reason as
+     --ih-fg-inverse in this block — the engine's own primary button already
+     writes `text-ih-fg-inverse` and was therefore never broken, while the client
+     portal wrote `text-ih-primary-fg` and was. */
+  --ih-primary-fg: #0f172a;
+
+  --ih-fg-1: #f1f5f9;
+  --ih-fg-2: #cbd5e1;
+  --ih-fg-3: #94a3b8;
+  --ih-fg-4: #64748b;
+  --ih-fg-5: #334155;
+  --ih-fg-inverse: #0f172a;
+
+  --ih-bg-app: #0f172a;
+  --ih-bg-card: #1e293b;
+  /* IA-124 — this was #1e293b, i.e. IDENTICAL to --ih-bg-card, so every
+     muted-on-card surface in dark mode was invisible. `bg-ih-bg-muted` appears
+     322 times, 150 of them as `hover:`, which is why the symptom was a scatter
+     of "that button feels dead" reports rather than one obvious break: muted on
+     the APP background still worked, muted on a card did nothing at all.
+     Verified by pixel-comparing the Invoices "View inspection" button before
+     and after hover — no change whatsoever.
+
+     Lighter than the card (not darker) because dark UIs elevate on hover, and
+     because it must also stay clearly apart from --ih-bg-app for the elements
+     that sit directly on the page background. */
+  --ih-bg-muted: #273549;
+  --ih-bg-inverse: #f8fafc;
+
+  --ih-status-ok-bg: rgba(16, 185, 129, 0.10);
+  --ih-status-ok-fg: #34d399;
+  --ih-status-watch-bg: rgba(245, 158, 11, 0.10);
+  --ih-status-watch-fg: #fbbf24;
+  /* Stays red-500 while light moved to red-600, because `--ih-fg-inverse` is
+     not the same colour in the two themes: light puts WHITE on this fill and
+     needs it darker (#dc2626 = 4.83:1, #ef4444 was 3.76:1), dark/field put
+     near-black #0f172a on it and need it LIGHTER (4.74:1 vs 3.70:1). Until
+     this line the token was declared once in `:root` and inherited here, so
+     darkening it for light silently broke both dark themes. */
+  --ih-status-bad: #ef4444;
+  --ih-status-bad-bg: rgba(239, 68, 68, 0.10);
+  --ih-status-bad-fg: #f87171;
+  --ih-status-info-bg: rgba(14, 165, 233, 0.10);
+  --ih-status-info-fg: #38bdf8;
+
+  --ih-border-color: #334155;
+  --ih-border-strong-color: #475569;
+
+  --ih-backdrop: rgba(2, 6, 23, 0.65);
+}
+
+/* ── Field mode (Track H, migration step 5) ──
+   High-contrast, large-type variant of dark for outdoor/sunlight use:
+   18px base font (rem-based sizes scale up), near-black background,
+   brighter foregrounds and stronger borders. Inherits everything else
+   from the dark block above. */
+html[data-color-scheme="field"] {
+  font-size: 18px;
+
+  /* Restated (field's card is darker, #0f172a): 5.99:1 here. */
+  --ih-primary-text: #818cf8;
+  /* Restated for explicitness, not because it differs: field does not re-declare
+     --ih-primary, so the fill is the dark block's #818cf8 and the answer is the
+     same #0f172a at 5.98:1. Stated here so the high-contrast theme's on-fill
+     colour can be read off its own block instead of inferred from the cascade.
+     TOKEN_INVARIANTS measures all three themes, so if field ever takes its own
+     --ih-primary these two stop agreeing and the gate says so. */
+  --ih-primary-fg: #0f172a;
+
+  --ih-fg-1: #ffffff;
+  --ih-fg-2: #e2e8f0;
+  --ih-fg-3: #cbd5e1;
+  --ih-fg-4: #94a3b8;
+
+  --ih-bg-app: #020617;
+  --ih-bg-card: #0f172a;
+  --ih-bg-muted: #1e293b;
+
+  --ih-status-ok-fg: #6ee7b7;
+  --ih-status-watch-fg: #fcd34d;
+  --ih-status-bad-fg: #fca5a5;
+  --ih-status-info-fg: #7dd3fc;
+
+  --ih-border-color: #475569;
+  --ih-border-strong-color: #64748b;
+}
+
+/* ── Utility classes from Design System §1.6 ── */
+.ih-eyebrow {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  /* fg-3, not fg-4. This is a section LABEL — the sidebar's "Workspace" heading
+     — so it is text, and fg-4 is the decoration tier (chevrons, dividers,
+     placeholders): 2.56:1 on a light card and 3.07:1 on a dark one. fg-3 is
+     4.76 / 5.71 / 12.02. The rule was invisible to `lint:contrast` because the
+     gate read Tailwind class strings only and this colour is set in CSS; that is
+     now covered by `cssTextRules`. */
+  color: var(--ih-fg-3);
+}
+
+.ih-input {
+  height: 36px;
+  padding: 0 12px;
+  border-radius: var(--radius-ih-input);
+  border: 1px solid var(--ih-border-color);
+  background: var(--ih-bg-card);
+  color: var(--ih-fg-1);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.ih-input:focus {
+  border-color: var(--ih-primary);
+  box-shadow: var(--shadow-ih-focus);
+}
+/* IA-127 — the design system had NO :disabled rule at all, so a disabled Input
+   or Select rendered pixel-identical to a live one. Buttons had always dimmed
+   themselves (Button / IconButton / MenuItem / Pagination each hand-roll
+   `disabled:opacity-* disabled:cursor-not-allowed`); the form controls, which
+   share .ih-input, had nothing. The case that surfaced it: Edit Role locks the
+   Kind select and explains why underneath, and the control still looked exactly
+   like the two live selects below it.
+
+   Deliberately opacity + cursor rather than a background swap — a swap would
+   want --ih-bg-muted, and that token is only just distinguishable from the card
+   again (IA-124). Opacity works in all three themes without another token.
+   The chevron is a SIBLING of the select (Select.tsx draws it outside the
+   control), so it needs dimming of its own or the control fades while its arrow
+   stays bright. */
+.ih-input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ih-input:disabled + svg {
+  opacity: 0.55;
+}
+
+.ih-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--ih-bg-muted);
+  border: 1px solid var(--ih-border-color);
+  font-family: var(--font-ih-mono);
+  font-size: 11px;
+  /* fg-2, not fg-3, because this rule paints its OWN muted background: fg-3 on
+     --ih-bg-muted is 4.34:1 in light, 0.16 short. This is the "Ctrl K" hint next
+     to sidebar search — the one place the app names its search shortcut. */
+  color: var(--ih-fg-2);
+}
+
+.ih-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+}
+.ih-pill--sat { background: var(--ih-status-ok-bg); color: var(--ih-status-ok-fg); }
+.ih-pill--monitor { background: var(--ih-status-watch-bg); color: var(--ih-status-watch-fg); }
+.ih-pill--defect { background: var(--ih-status-bad-bg); color: var(--ih-status-bad-fg); }
+/* fg-2, not fg-3: the three tone modifiers above each pair a -fg token with its
+   own tinted background, but this one sits on --ih-bg-muted, where fg-3 is
+   4.34:1 in light. Its size comes from `.ih-pill` (11px), which is why the gate
+   has to read a modifier's BEM base class to know what it is measuring. */
+.ih-pill--ni { background: var(--ih-bg-muted); color: var(--ih-fg-2); }
+
+/* ── FileDropzone (shared-ui) ──
+   Marching-ants dashes on drag-over (one dash period = 8+6 = 14 units) and
+   the ok-flash when a file lands. Registered as @theme animations so
+   `animate-ih-dash-march` / `animate-ih-ok-flash` utilities exist. */
+@keyframes ih-dash-march { to { stroke-dashoffset: -14; } }
+@keyframes ih-ok-flash { from { background-color: var(--color-ih-ok-bg); } to { background-color: transparent; } }
+@keyframes ih-slide-in-right { from { transform: translateX(100%); } to { transform: none; } }
+@theme {
+  --animate-ih-dash-march: ih-dash-march 0.6s linear infinite;
+  --animate-ih-ok-flash: ih-ok-flash 1s ease-out;
+  --animate-ih-slide-in-right: ih-slide-in-right 0.2s ease-out;
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@inspectorhub/field-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The OpenInspection field inspection editor as an embeddable React package.",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/InspectorHub/OpenInspection",
+    "directory": "packages/field-ui"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "konva": "^10.2.5",
+    "lib0": "^0.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-easy-crop": "^6.0.2",
+    "react-konva": "^19.2.5",
+    "react-photo-album": "^3.6.0",
+    "sortablejs": "^1.15.7",
+    "yet-another-react-lightbox": "^3.32.0",
+    "y-indexeddb": "^9.0.0",
+    "y-protocols": "^1.0.0",
+    "yjs": "^13.6.0"
+  }
+}