@heuresys/ui 0.1.0

package/src/components/brand/candidates/LogoCandidateC.tsx

@@ -0,0 +1,68 @@
+import type { SVGProps } from "react";
+
+/**
+ * UXIX-0007 candidate C — Triangle constellation mark.
+ *
+ * Circle scaffold + three nodes forming a triangle. People / role / capability
+ * triangulation. Lightest of the three, more editorial, leans into "workforce
+ * intelligence" positioning.
+ *
+ * Wordmark: 300 (light), letter-spacing +1, all-lowercase.
+ *
+ * Raw SVG source: `@heuresys/ui/assets/brand/candidates/UXIX-0007-logo/heuresys-logo-C-{symbol,full}.svg`.
+ */
+
+export function LogoCandidateCSymbol(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      role="img"
+      aria-label="Heuresys candidate C — triangle constellation mark"
+      {...props}
+    >
+      <title>Heuresys candidate C — triangle constellation mark</title>
+      <circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.4" />
+      <circle cx="24" cy="12" r="4" fill="currentColor" />
+      <circle cx="13" cy="32" r="4" fill="currentColor" />
+      <circle cx="35" cy="32" r="4" fill="currentColor" />
+      <line x1="24" y1="12" x2="13" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <line x1="24" y1="12" x2="35" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <line x1="13" y1="32" x2="35" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function LogoCandidateCFull(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 220 48"
+      role="img"
+      aria-label="Heuresys candidate C — triangle constellation + wordmark"
+      {...props}
+    >
+      <title>Heuresys candidate C — triangle constellation + wordmark</title>
+      <g>
+        <circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.4" />
+        <circle cx="24" cy="12" r="4" fill="currentColor" />
+        <circle cx="13" cy="32" r="4" fill="currentColor" />
+        <circle cx="35" cy="32" r="4" fill="currentColor" />
+        <line x1="24" y1="12" x2="13" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        <line x1="24" y1="12" x2="35" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        <line x1="13" y1="32" x2="35" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      </g>
+      <text
+        x="56"
+        y="32"
+        fontFamily="'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif"
+        fontSize="22"
+        fontWeight="300"
+        letterSpacing="1"
+        fill="currentColor"
+      >
+        heuresys
+      </text>
+    </svg>
+  );
+}

package/src/components/brand/candidates/LogoCandidateD.tsx

@@ -0,0 +1,77 @@
+import type { SVGProps } from "react";
+
+/**
+ * UXIX-0007 candidate D — Y-accent wordmark (legacy port).
+ *
+ * Inherited from the evo.heuresys.com legacy brand identity:
+ * `heuresys` lowercase wordmark in Exo 2 700, with the middle "y" rendered
+ * in a contrast accent color while the rest is in the primary blue. The
+ * standalone mark is the "y" letterform alone — typographic, not geometric.
+ *
+ * Two palette behaviours:
+ * - Default (no className override): hardcoded legacy colors blue #3B82F6
+ *   + purple #A855F7 — brand-direct, palette-independent.
+ * - Adaptive: wrap with className that sets `color` for the body letters
+ *   (currentColor) and `--logo-accent` CSS var for the "y" (e.g.
+ *   `style={{ "--logo-accent": "var(--palette-2)" }} className="text-[var(--palette-1)]"`).
+ *   This allows the logo to follow the active palette when theme switches.
+ *
+ * Legacy assets archived in `D:\ux-design-shared\ui\src\assets\brand\legacy\`.
+ * Raw SVG twins in `../../assets/brand/candidates/UXIX-0007-logo/heuresys-logo-D-{symbol,full}.svg`.
+ */
+
+const LEGACY_BLUE = "#3B82F6";
+const LEGACY_PURPLE = "#A855F7";
+
+export function LogoCandidateDSymbol(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      role="img"
+      aria-label="Heuresys candidate D — Y-accent mark"
+      {...props}
+    >
+      <title>Heuresys candidate D — Y-accent mark (legacy port)</title>
+      <text
+        x="24"
+        y="38"
+        textAnchor="middle"
+        fontFamily="'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif"
+        fontSize="44"
+        fontWeight="700"
+        letterSpacing="0"
+        fill={`var(--logo-accent, ${LEGACY_PURPLE})`}
+      >
+        y
+      </text>
+    </svg>
+  );
+}
+
+export function LogoCandidateDFull(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 220 48"
+      role="img"
+      aria-label="Heuresys candidate D — Y-accent wordmark"
+      {...props}
+    >
+      <title>Heuresys candidate D — Y-accent wordmark (legacy port)</title>
+      <text
+        x="110"
+        y="34"
+        textAnchor="middle"
+        fontFamily="'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif"
+        fontSize="34"
+        fontWeight="700"
+        letterSpacing="-0.5"
+      >
+        <tspan fill={`var(--logo-body, ${LEGACY_BLUE})`}>heures</tspan>
+        <tspan fill={`var(--logo-accent, ${LEGACY_PURPLE})`}>y</tspan>
+        <tspan fill={`var(--logo-body, ${LEGACY_BLUE})`}>s</tspan>
+      </text>
+    </svg>
+  );
+}

package/src/components/brand/candidates/index.ts

@@ -0,0 +1,4 @@
+export * from "./LogoCandidateA";
+export * from "./LogoCandidateB";
+export * from "./LogoCandidateC";
+export * from "./LogoCandidateD";

package/src/styles/globals.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+@import "./hover-affordance.css";
+
+/*
+ * Design tokens (placeholder) — TBD by brand definition.
+ * Tokens use OKLCH for perceptual uniformity. Values picked to read well on
+ * white and dark backgrounds; replace once the official Heuresys palette is
+ * confirmed.
+ */
+@theme {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  --color-primary:        oklch(0.55 0.18 250);
+  --color-primary-fg:     oklch(1.00 0.00 0);
+  --color-destructive:    oklch(0.55 0.20 25);
+  --color-destructive-fg: oklch(1.00 0.00 0);
+}
+
+html, body {
+  font-family: var(--font-sans);
+}

package/src/styles/hover-affordance.css

@@ -0,0 +1,280 @@
+/* ============================================================
+   Heuresys universal hover + interaction sheet (canonical).
+   ============================================================
+   Source: ux-design/prototypes/superuser-system-health.html
+   Mirror at heuresys-advanced/.../code_examples/src/styles/hover-affordance.css
+
+   IMPORTANT — color tokens convention:
+     This sheet uses `color-mix(in srgb, var(--X) N%, transparent)` rather than
+     `hsl(var(--X) / N)`. The latter syntax requires the var to be a bare HSL
+     triple ("221 83% 53%"); apps/web emits hex values via PaletteProvider, so
+     hsl()-wrapped vars would resolve to `hsl(#2563EB / 0.18)` which is invalid
+     and falls back to transparent (= the bug that made cross-hair / hover
+     invisible). color-mix() accepts any color format.
+   ============================================================ */
+
+/* ---------- Cards (every <article> with a border) ---------- */
+article {
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+  transform-origin: center;
+}
+article:hover {
+  border-color: color-mix(in srgb, var(--primary) 85%, transparent) !important;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
+    0 6px 18px color-mix(in srgb, var(--primary) 12%, transparent),
+    var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.06));
+  transform: scale(1.012);
+  cursor: pointer;
+  z-index: 1;
+  position: relative;
+}
+
+/* ---------- Alert banner ---------- */
+[role="alert"] {
+  transition: border-color 180ms ease, box-shadow 180ms ease;
+}
+[role="alert"]:hover {
+  border-color: color-mix(in srgb, var(--primary) 85%, transparent) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
+}
+
+/* ---------- Table rows (every tbody row) ---------- */
+tbody tr {
+  transition: background-color 150ms ease, box-shadow 150ms ease;
+}
+tbody tr:hover {
+  background: color-mix(in srgb, var(--accent) 90%, transparent) !important;
+  box-shadow:
+    inset 4px 0 0 var(--primary),
+    inset 0 1px 0 color-mix(in srgb, var(--primary) 40%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--primary) 40%, transparent);
+  cursor: pointer;
+}
+/* Sticky cells need explicit row-hover override */
+tbody tr:hover > td.sticky,
+tbody tr:hover > td[class*="sticky"] {
+  background-color: color-mix(in srgb, var(--accent) 90%, transparent) !important;
+}
+
+/* ---------- Log stream lines ---------- */
+.log-line {
+  transition: background-color 150ms ease, box-shadow 150ms ease;
+  font-size: 12px;
+}
+.log-line .ts    { color: var(--muted-foreground); }
+.log-line .lvl-info  { color: var(--info); }
+.log-line .lvl-warn  { color: var(--warning); }
+.log-line .lvl-error { color: var(--danger); }
+.log-line .lvl-debug { color: var(--muted-foreground); }
+.log-line .lvl-trace { color: var(--palette-3); }
+.log-line:hover {
+  background: color-mix(in srgb, var(--accent) 90%, transparent) !important;
+  box-shadow:
+    inset 4px 0 0 var(--info),
+    inset 0 1px 0 color-mix(in srgb, var(--info) 40%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--info) 40%, transparent);
+  cursor: pointer;
+}
+
+/* ---------- Feed items: audit feed + incident timeline ---------- */
+ul[class*="divide-y"] > li,
+ol[class*="space-y"] > li {
+  transition: background-color 150ms ease, box-shadow 150ms ease;
+}
+ul[class*="divide-y"] > li:hover {
+  background: color-mix(in srgb, var(--accent) 75%, transparent);
+  box-shadow:
+    inset 4px 0 0 var(--primary),
+    inset 0 1px 0 color-mix(in srgb, var(--primary) 35%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--primary) 35%, transparent);
+  cursor: pointer;
+}
+ol[class*="space-y"] > li:hover {
+  box-shadow:
+    inset 4px 0 0 var(--primary),
+    inset 0 1px 0 color-mix(in srgb, var(--primary) 35%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--primary) 35%, transparent);
+  cursor: pointer;
+}
+
+/* ---------- Sidebar nav links ---------- */
+.nav-link {
+  border: 1px solid transparent;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease;
+}
+.nav-link:hover {
+  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
+}
+
+/* ============================================================
+   Table cross-hair — JS toggles col-cross, cell-cross,
+   col-hover-header on mouseenter/leave of th and td.
+   Helper: lib/table-cursor.ts → attachCrossHair(table).
+   ============================================================ */
+table {
+  position: relative;
+}
+tbody td.col-cross {
+  background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important;
+  transition: background-color 100ms ease;
+}
+tbody tr.row-cross > td {
+  background-color: color-mix(in srgb, var(--primary) 6%, transparent) !important;
+}
+tbody td.cell-cross {
+  background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 70%, transparent);
+  position: relative;
+  z-index: 2;
+}
+thead th.col-hover-header {
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
+  color: var(--primary);
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+/* Sticky cells too */
+tbody td.sticky.col-cross,
+tbody td[class*="sticky"].col-cross {
+  background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important;
+}
+tbody td.sticky.cell-cross,
+tbody td[class*="sticky"].cell-cross {
+  background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
+}
+thead th.sticky.col-hover-header,
+thead th[class*="sticky"].col-hover-header {
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
+}
+
+/* ============================================================
+   Sidebar collapsed state — body[data-sidebar="collapsed"]
+   ============================================================ */
+body[data-sidebar="collapsed"] [data-shell="grid"] {
+  grid-template-columns: 72px 1fr !important;
+}
+body[data-sidebar="collapsed"] aside .sidebar-section-label,
+body[data-sidebar="collapsed"] aside .sidebar-group-toggle,
+body[data-sidebar="collapsed"] aside .sidebar-subtree,
+body[data-sidebar="collapsed"] aside .sidebar-footer-card,
+body[data-sidebar="collapsed"] aside .nav-label,
+body[data-sidebar="collapsed"] aside .nav-aux {
+  display: none !important;
+}
+body[data-sidebar="collapsed"] aside .nav-link {
+  justify-content: center;
+}
+body[data-sidebar="collapsed"] .sidebar-icon-collapse { display: none; }
+body[data-sidebar="collapsed"] .sidebar-icon-expand   { display: block; }
+
+/* ============================================================
+   Sidebar group expand/collapse — aria-expanded driven
+   ============================================================ */
+.sidebar-group-toggle[aria-expanded="false"] + .sidebar-group-content {
+  display: none;
+}
+[data-group-chevron] {
+  transition: transform 200ms ease;
+}
+.sidebar-group-toggle[aria-expanded="false"] [data-group-chevron] {
+  transform: rotate(-90deg);
+}
+
+/* ============================================================
+   Palette dropdown chevron rotation
+   ============================================================ */
+#js-palette-trigger[aria-expanded="true"] [data-palette-chevron] {
+  transform: rotate(180deg);
+}
+
+/* ============================================================
+   Custom scrollbar — quiet, premium (port from prototype)
+   ============================================================ */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 6px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
+}
+
+/* ============================================================
+   Focus ring system-wide
+   ============================================================ */
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* ============================================================
+   Animations — pulse-dot, shimmer-bar (port from prototype)
+   ============================================================ */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.35; }
+}
+.pulse-dot {
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+.shimmer-bar {
+  position: relative;
+  overflow: hidden;
+}
+.shimmer-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--primary) 8%, transparent),
+    transparent
+  );
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+/* Tabular numerics (port from prototype) */
+.num {
+  font-feature-settings: 'tnum' 1, 'cv03' 1;
+}
+
+/* ============================================================
+   prefers-reduced-motion — kill all transitions + transforms
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  article,
+  [role="alert"],
+  tbody tr,
+  .log-line,
+  ul[class*="divide-y"] > li,
+  ol[class*="space-y"] > li,
+  .nav-link,
+  [data-group-chevron],
+  [data-palette-chevron],
+  [data-shell="grid"],
+  .pulse-dot,
+  .shimmer-bar::after {
+    transition: none !important;
+    transform: none !important;
+    animation: none !important;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,109 @@
+/**
+ * Design tokens (RTGB B7.1-B7.4).
+ *
+ * OKLCH color space for perceptual uniformity. All semantic colors are
+ * exposed as CSS custom properties at :root and overridden in .dark.
+ *
+ * Tailwind 4 @theme directive maps these to utility classes (e.g.,
+ * `bg-background`, `text-foreground`, `border-border`).
+ */
+
+@theme {
+  /* ---- Color: surfaces ---- */
+  --color-background: oklch(0.99 0.005 264);
+  --color-foreground: oklch(0.22 0.018 252);
+
+  /* ---- Color: primary / brand ---- */
+  --color-primary: oklch(0.55 0.18 264);
+  --color-primary-fg: oklch(0.99 0 0);
+
+  /* ---- Color: secondary / muted ---- */
+  --color-secondary: oklch(0.96 0.005 252);
+  --color-secondary-fg: oklch(0.22 0.018 252);
+  --color-muted: oklch(0.96 0.005 252);
+  --color-muted-fg: oklch(0.5 0.012 252);
+  --color-accent: oklch(0.96 0.005 252);
+  --color-accent-fg: oklch(0.22 0.018 252);
+
+  /* ---- Color: feedback ---- */
+  --color-destructive: oklch(0.6 0.22 22);
+  --color-destructive-fg: oklch(0.99 0 0);
+  --color-success: oklch(0.65 0.16 145);
+  --color-success-fg: oklch(0.99 0 0);
+  --color-warning: oklch(0.78 0.16 80);
+  --color-warning-fg: oklch(0.22 0.018 252);
+  --color-info: oklch(0.65 0.16 240);
+  --color-info-fg: oklch(0.99 0 0);
+
+  /* ---- Color: chrome ---- */
+  --color-border: oklch(0.92 0.008 252);
+  --color-input: oklch(0.92 0.008 252);
+  --color-ring: oklch(0.55 0.18 264);
+
+  /* ---- Typography ---- */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* Fluid type scale: clamp(min, preferred, max) */
+  --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
+  --text-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
+  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
+  --text-lg: clamp(1.1rem, 1.04rem + 0.3vw, 1.22rem);
+  --text-xl: clamp(1.3rem, 1.22rem + 0.4vw, 1.45rem);
+  --text-2xl: clamp(1.55rem, 1.4rem + 0.6vw, 1.8rem);
+  --text-3xl: clamp(1.9rem, 1.7rem + 1vw, 2.4rem);
+
+  /* ---- Radius ---- */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* ---- Motion ---- */
+  --motion-duration-fast: 120ms;
+  --motion-duration-base: 200ms;
+  --motion-duration-slow: 320ms;
+  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* ---- Dark mode overrides ---- */
+.dark {
+  --color-background: oklch(0.18 0.02 252);
+  --color-foreground: oklch(0.96 0.005 252);
+
+  --color-primary: oklch(0.7 0.18 264);
+  --color-primary-fg: oklch(0.18 0.02 252);
+
+  --color-secondary: oklch(0.28 0.018 252);
+  --color-secondary-fg: oklch(0.96 0.005 252);
+  --color-muted: oklch(0.28 0.018 252);
+  --color-muted-fg: oklch(0.7 0.012 252);
+  --color-accent: oklch(0.32 0.025 252);
+  --color-accent-fg: oklch(0.96 0.005 252);
+
+  --color-destructive: oklch(0.65 0.22 22);
+  --color-success: oklch(0.7 0.16 145);
+  --color-warning: oklch(0.82 0.16 80);
+  --color-info: oklch(0.7 0.16 240);
+
+  --color-border: oklch(0.32 0.018 252);
+  --color-input: oklch(0.32 0.018 252);
+  --color-ring: oklch(0.7 0.18 264);
+}
+
+/* ---- Reduced motion respect (a11y) ---- */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}