@telepath-computer/television 0.1.206 → 0.1.209

package/dist/views/artifact-missing/index.html

@@ -4,71 +4,136 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Artifact file not found</title>
-    <style>
-      html, body {
-        margin: 0;
-        min-height: 100%;
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        color: #222222;
-        background: #dadada;
-      }
-      body {
-        display: grid;
-        place-items: center;
-        box-sizing: border-box;
-        min-height: 100vh;
-        padding: 24px;
-      }
-      main {
-        width: 100%;
-      }
-      .content-wrapper {
-        max-width: 520px;
-        margin: 0 auto;
-      }
-      h1 {
-        margin: 0 0 0.75rem;
-        font-size: 1.125rem;
-        line-height: 1.25;
-      }
-      p {
-        margin: 0;
-        font-size: 0.875rem;
-        line-height: 1.45;
-      }
-      .path-block {
-        margin: 1rem 0;
-      }
-      .path-label {
-        margin-bottom: 0.375rem;
-      }
-      code {
-        display: inline-block;
-        max-width: 100%;
-        overflow-wrap: anywhere;
-        padding: 0.125rem 0.3rem;
-        border-radius: 0.35rem;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-        font-size: 0.85em;
-        color: #253040;
-        background: #cbcbcb;
-        user-select: all;
-      }
-      [hidden] {
-        display: none !important;
-      }
-    </style>
-    <script type="module" crossorigin src="../../assets/artifactMissing-DY3nzD0p.js"></script>
-    <link rel="modulepreload" crossorigin href="../../assets/artifact-bridge-BhiFDvPj.js">
+    <style>/* Standalone documents inherit none of the app's foundation. These are the
+   declarations this page uses, copied from the foundation's colors.css,
+   text.css, and spacing.css. */
+:root {
+  --neutral-200: oklch(92.2% 0 none);
+  --neutral-900: oklch(20.5% 0 none);
+  --blue-500: oklch(0.623 0.214 259.815);
+
+  --color-text: var(--neutral-900);
+  --color-background: var(--neutral-200);
+
+  --text-base: 14px;
+  --text-sm: round(calc(var(--text-md) / var(--text-scale)), 1px);
+  --text-md: var(--text-base);
+  --text-lg: round(calc(var(--text-md) * var(--text-scale)), 1px);
+  --text-scale: 1.125;
+  --leading-base: 1.5;
+
+  /* Loading Hind here would require another standalone asset route. Use the
+     fallback portion of the foundation's sans stack instead. */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
+  --font-weight-semibold: 600;
+
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-12: 12px;
+  --space-24: 24px;
+  --radius-4: 4px;
+}
+
+/* The standalone reset declarations are copied from foundation/reset.css. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  line-height: var(--leading-base);
+  color: var(--color-text);
+  background: var(--color-background);
+}
+
+h1,
+p {
+  margin: 0;
+}
+
+/* The page: the app's ground with the state's message in a centred reading
+   column. */
+.artifact-error {
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: var(--space-24);
+  display: grid;
+  place-items: center;
+  background: var(--color-background);
+}
+
+.artifact-error-body {
+  max-width: 520px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+.artifact-error h1 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+}
+
+.artifact-error-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* The address: wrapping anywhere, the link plainly a link. */
+.artifact-error a,
+.artifact-error .plain-address {
+  display: inline-block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.artifact-error a {
+  color: var(--blue-500);
+}
+
+/* The chips — the path, the commands: mono, wrapping anywhere, selected
+   whole by one press — they exist to be copied. */
+.artifact-error code {
+  display: inline-block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  padding: var(--space-2) var(--space-6);
+  border-radius: var(--radius-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  background: var(--neutral-200);
+  user-select: all;
+}
+
+/* The fixed documents reveal optional blocks after their host replies. */
+[hidden] {
+  display: none !important;
+}
+</style>
+    <script type="module" crossorigin src="../../assets/artifactMissing-9rcTXhkH.js"></script>
+    <link rel="modulepreload" crossorigin href="../../assets/artifact-bridge-BXDhGuL-.js">
     <link rel="modulepreload" crossorigin href="../../assets/missing-artifact-page-DVzJ41AE.js">
   </head>
   <body>
-    <main>
-      <div class="content-wrapper">
+    <main class="artifact-error">
+      <div class="artifact-error-body">
         <h1 id="missing-title"></h1>
         <p id="missing-description"></p>
-        <section id="path-block" class="path-block" aria-label="Missing artifact path" hidden>
-          <p class="path-label">Registered path:</p>
+        <section id="path-block" class="artifact-error-block" aria-label="Missing artifact path" hidden>
+          <p>Registered path:</p>
           <p><code id="missing-path"></code></p>
         </section>
         <p id="missing-recovery"></p>