refactor(web): extract shared UI and host packages

Author: mnoah1

web/BUILD.bazel

@@ -20,6 +20,13 @@ test_suite(
         "//web/service/submitqueue:typecheck_typecheck_test",
         "//web/submitqueue:test",
         "//web/submitqueue:typecheck_typecheck_test",
+        "//web/platform:lint",
+        "//web/platform:test",
+        "//web/platform:typecheck_typecheck_test",
+        "//web/service/shared:lint",
+        "//web/service/shared:test",
+        "//web/service/shared:typecheck_typecheck_test",
+        "//web/submitqueue:lint",
         ":e2e_typecheck_typecheck_test",
     ],
 )

web/platform/BUILD.bazel

@@ -0,0 +1,30 @@
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//web/platform:vitest/package_json.bzl", vitest = "bin")
+load("@npm//web/service/submitqueue:eslint/package_json.bzl", eslint = "bin")
+load("//web/tool:library.bzl", "web_library")
+
+package(default_visibility = ["//web:__subpackages__"])
+
+npm_link_all_packages(name = "node_modules")
+
+web_library(
+    assets = ["styles.css"],
+    eslint = eslint,
+    package = "@submitqueue/web-platform",
+    test_deps = [
+        ":node_modules/@testing-library/jest-dom",
+        ":node_modules/@testing-library/react",
+        ":node_modules/@types/react-dom",
+        ":node_modules/jsdom",
+        ":node_modules/react-dom",
+        ":node_modules/vitest",
+    ],
+    vitest = vitest,
+    deps = [
+        ":node_modules/@types/node",
+        ":node_modules/@types/react",
+        ":node_modules/react",
+    ],
+)
+
+exports_files(["styles.css"])

…b/submitqueue/view/auto-refresh.test.tsx web/platform/auto-refresh.test.tsxweb/submitqueue/view/auto-refresh.test.tsx renamed to web/platform/auto-refresh.test.tsx web/submitqueue/view/auto-refresh.test.tsx renamed to web/platform/auto-refresh.test.tsx

@@ -0,0 +1 @@
+export { default } from "../tool/eslint.config.mjs";

web/submitqueue/view/auto-refresh.tsx web/platform/auto-refresh.tsxweb/submitqueue/view/auto-refresh.tsx renamed to web/platform/auto-refresh.tsx

@@ -0,0 +1,4 @@
+"use client";
+
+export * from "./navigation.js";
+export * from "./auto-refresh.js";

web/platform/eslint.config.mjs

@@ -0,0 +1,45 @@
+{
+  "name": "@submitqueue/web-platform",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "sideEffects": [
+    "./styles.css"
+  ],
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./path-segment": {
+      "types": "./dist/path-segment.d.ts",
+      "import": "./dist/path-segment.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "22.18.6",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "4.0.7"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20"
+  }
+}

web/platform/index.ts

@@ -0,0 +1,120 @@
+/* Common native UI styles, scoped to .sq-app; hosts may override --sq-* properties. */
+.sq-app {
+  color-scheme: light;
+  --sq-surface: #fff;
+  --sq-surface-muted: #f5f6f8;
+  --sq-text: #202327;
+  --sq-muted: #626a74;
+  --sq-border: #e3e6e9;
+  --sq-accent: #175fc5;
+  --sq-accent-soft: #edf3ff;
+  --sq-success: #187247;
+  --sq-success-soft: #edf8f1;
+  --sq-warning: #8b590f;
+  --sq-warning-soft: #fff5e7;
+  --sq-danger: #b33535;
+  --sq-danger-soft: #fff0ef;
+  --sq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sq-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--sq-font);
+}
+.sq-app[data-theme="dark"] {
+  color-scheme: dark;
+  --sq-surface: #16181b;
+  --sq-surface-muted: #202328;
+  --sq-text: #e8eaed;
+  --sq-muted: #a0a7b0;
+  --sq-border: #33373d;
+  --sq-accent: #6ea8ff;
+  --sq-accent-soft: #1c2a40;
+  --sq-success: #5cc28a;
+  --sq-success-soft: #18301f;
+  --sq-warning: #e0a84a;
+  --sq-warning-soft: #36290f;
+  --sq-danger: #ff7b72;
+  --sq-danger-soft: #3a1f1e;
+}
+@media (prefers-color-scheme: dark) {
+  .sq-app[data-theme="system"] {
+    color-scheme: dark;
+    --sq-surface: #16181b;
+    --sq-surface-muted: #202328;
+    --sq-text: #e8eaed;
+    --sq-muted: #a0a7b0;
+    --sq-border: #33373d;
+    --sq-accent: #6ea8ff;
+    --sq-accent-soft: #1c2a40;
+    --sq-success: #5cc28a;
+    --sq-success-soft: #18301f;
+    --sq-warning: #e0a84a;
+    --sq-warning-soft: #36290f;
+    --sq-danger: #ff7b72;
+    --sq-danger-soft: #3a1f1e;
+  }
+}
+.sq-app, .sq-app * { box-sizing: border-box; }
+.sq-app { background: var(--sq-surface); color: var(--sq-text); font-size: 14px; line-height: 1.5; }
+.sq-app a { color: var(--sq-accent); text-decoration: none; overflow-wrap: anywhere; }
+.sq-app a:hover { text-decoration: underline; }
+.sq-app a:focus-visible, .sq-app button:focus-visible, .sq-app input:focus-visible, .sq-app select:focus-visible, .sq-app summary:focus-visible {
+  outline: 3px solid var(--sq-accent); outline-offset: 3px;
+}
+.sq-app h1 { font-size: 26px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.5px; }
+.sq-app h2 { font-size: 16px; margin: 0 0 12px; }
+.sq-app p { margin: 8px 0; }
+.sq-app button, .sq-app input, .sq-app select {
+  font: inherit; border: 1px solid var(--sq-border); border-radius: 6px;
+  color: var(--sq-text); background: var(--sq-surface); padding: 8px 12px;
+}
+.sq-app button, .sq-app summary { cursor: pointer; }
+.sq-app button:disabled { cursor: default; opacity: .65; }
+.sq-app button:hover:not(:disabled) { background: var(--sq-surface-muted); }
+.sq-app input { min-width: 0; }
+.sq-app.site-frame { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
+.sq-app .site-header, .sq-app .shell, .sq-app .site-footer { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
+.sq-app .site-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--sq-border); }
+.sq-app .brand { display: flex; align-items: center; gap: 9px; color: var(--sq-text); font-weight: 600; font-size: 18px; }
+.sq-app .brand-mark { background: var(--sq-text); color: var(--sq-surface); border-radius: 6px; padding: 5px 7px; font-size: 12px; }
+.sq-app .environment-pill, .sq-app .site-footer, .sq-app .sq-secondary { color: var(--sq-muted); font-size: 12px; }
+.sq-app .site-footer { padding: 20px 0; border-top: 1px solid var(--sq-border); }
+.sq-app .shell { padding-block: 28px 48px; }
+.sq-app .centered-state { min-height: 100vh; display: grid; place-items: center; }
+.sq-app .page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
+.sq-app .page-heading p { color: var(--sq-muted); font-size: 12px; }
+.sq-app .eyebrow { font-size: 12px; margin: 0 0 10px; color: var(--sq-muted); }
+.sq-app .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
+.sq-app .sq-refresh { display: flex; align-items: center; gap: 10px; color: var(--sq-muted); font-size: 12px; }
+.sq-app .sq-error { padding: 16px; border-radius: 6px; background: var(--sq-danger-soft); }
+.sq-app .sq-error p { overflow-wrap: anywhere; }
+.sq-app .button-link { display: inline-block; margin-top: 16px; }
+.sq-app .state-card { max-width: 700px; }
+@media (max-width: 680px) {
+.sq-app .site-header, .sq-app .shell, .sq-app .site-footer { width: calc(100% - 32px); }
+.sq-app .site-header { gap: 12px; flex-wrap: wrap; padding-block: 14px; }
+.sq-app button, .sq-app select, .sq-app input { min-height: 44px; }
+}
+
+
+.sq-app .sq-table-scroll { overflow-x: auto; }
+.sq-app table { width: 100%; border-collapse: collapse; text-align: left; }
+.sq-app th { font-weight: 500; color: var(--sq-muted); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--sq-border); }
+.sq-app td { padding: 18px 12px; border-bottom: 1px solid var(--sq-border); vertical-align: top; }
+.sq-app th:first-child, .sq-app td:first-child { padding-left: 0; }
+.sq-app th:last-child, .sq-app td:last-child { padding-right: 0; }
+.sq-app td time { font-size: 12px; color: var(--sq-muted); }
+.sq-app .sq-table-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; font-size: 12px; color: var(--sq-muted); }
+.sq-app .sq-status, .sq-app .sq-event { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 12px; color: var(--sq-accent); background: var(--sq-accent-soft); white-space: nowrap; }
+.sq-app .sq-status[data-tone="neutral"] { color: var(--sq-muted); background: var(--sq-surface-muted); }
+.sq-app .sq-status[data-tone="success"] { color: var(--sq-success); background: var(--sq-success-soft); }
+.sq-app .sq-status[data-tone="danger"] { color: var(--sq-danger); background: var(--sq-danger-soft); }
+.sq-app .sq-status[data-tone="warning"] { color: var(--sq-warning); background: var(--sq-warning-soft); }
+.sq-app .sq-empty { padding: 35px 0; color: var(--sq-muted); }
+.sq-app .sq-breadcrumb { display: flex; gap: 10px; flex-wrap: wrap; color: var(--sq-muted); font-size: 12px; margin-bottom: 24px; }
+.sq-app .sq-detail-columns { display: grid; grid-template-columns: 1fr 1.15fr; gap: 38px; }
+.sq-app .sq-facts { margin: 0; }
+.sq-app .sq-facts > div { padding: 11px 0; border-bottom: 1px solid var(--sq-border); }
+.sq-app dt { color: var(--sq-muted); font-size: 12px; margin-bottom: 5px; }
+.sq-app dd { margin: 0; overflow-wrap: anywhere; }
+@media (max-width: 680px) {
+.sq-app .sq-detail-columns { grid-template-columns: 1fr; gap: 20px; }
+}