@signal9/era-ui 3.6.0 → 3.8.0

package/dist/generated-docs/logo.md

@@ -0,0 +1,24 @@
+# Logo
+
+The signalnine dish mark, reactive to a state preset.
+
+## Import
+
+```ts
+import { Logo } from "$lib/ui/logo";
+```
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `depth?` | `number` | `52` | — |
+| `tilt?` | `number` | `55` | — |
+| `aim?` | `number` | `0` | — |
+| `light?` | `number` | `REST_LIGHT` | — |
+| `inset?` | `number` | `100` | — |
+| `palette?` | `LogoPalette` | `'amber'` | — |
+| `state?` | `LogoState` | `'manual'` | 'manual' renders a static pose; any other state animates its preset. |
+| `size?` | `number` | `272` | — |
+| `pressable?` | `boolean` | `false` | Deepen the bowl while held, then spring back on release. |
+| `class?` | `string` | — | — |

package/dist/generated-docs/manifest.json

@@ -646,6 +646,17 @@
       ],
       "file": "label.md"
     },
+    {
+      "slug": "logo",
+      "title": "Logo",
+      "summary": "The signalnine dish mark, reactive to a state preset.",
+      "tokenEstimate": 176,
+      "sections": [
+        "Import",
+        "Props"
+      ],
+      "file": "logo.md"
+    },
     {
       "slug": "menu",
       "title": "Menu",

package/dist/styles/index.css

@@ -44,7 +44,19 @@
  * the UA sheet regardless of specificity, so this still wins by default.
  *
  * Engines without the property keep their own dots — masking never degrades to
- * plaintext, only to a different glyph. */
+ * plaintext, only to a different glyph.
+ *
+ * KNOWN LIMIT, verified in Chromium 1228: a real input[type=password] ignores
+ * this entirely and always draws disc. Author CSS does not win — square, circle
+ * and none all render dots — and CSS.supports() reports true for every one of
+ * them, so it fails silently. The property DOES apply to input[type=text], and
+ * the var() substitutes correctly, so this rule is live wiring rather than dead
+ * code: point it at a text input and the axis drives the glyph.
+ *
+ * Forcing squares on a password field therefore means rendering it as
+ * type="text" and masking it ourselves, which costs password-manager detection
+ * and the screen-reader "password" announcement. Deliberately not done — the
+ * semantics are worth more than the corner. */
 :where(input[type='password']) {
 	-webkit-text-security: var(--era-mask-glyph, disc);
 }

package/dist/styles/themes.css

@@ -13,8 +13,10 @@
  *     dark/light the same way the default neutral scale does.
  *   - Add data-theme="sand" for a cooler sandstone palette with
  *     mint contrast.
- *   - Add data-theme="signalnine" for a Yahoo! JAPAN x imageboard
- *     palette whose scale deliberately lurches hue mid-ramp.
+ *   - Add data-theme="signalnine" for a palette that refuses a clean
+ *     gradient: dark lurches hue twice (imageboard at night), light is
+ *     sampled off the live www.yahoo.co.jp. Both keep lightness
+ *     monotonic — only hue and chroma misbehave.
  */
 
 /* -------------------------------------------------- */
@@ -425,83 +427,109 @@
 }
 
 /* -------------------------------------------------- */
-/* Signalnine — light                                 */
+/* Signalnine — light (yahoo.co.jp, measured)         */
 /*                                                    */
-/* Yotsuba by day: cream paper, tan post boxes, dusty  */
-/* rose rules, maroon body text. Same two-seam trick    */
-/* as the dark variant, mirrored —                     */
-/*                                                    */
-/*   1–3   cream and tan paper                         */
-/*   4–7   rose rules, chroma climbing                 */
-/*   8–10  swerve to Yahoo violet for muted text       */
-/*   11–12 land on maroon for body copy                */
+/* Not eyeballed: the ramp was sampled off the live    */
+/* www.yahoo.co.jp in a headless browser, walking every */
+/* element and weighting each computed colour by its    */
+/* rendered area (backgrounds), glyph area (text), and  */
+/* edge length (borders). The winners by weight became  */
+/* the anchors below; only 6, 8 and 9 are interpolated, */
+/* and every other step reproduces a real site colour   */
+/* exactly:                                             */
+/*                                                      */
+/*   1  #FFFFFF  the page                               */
+/*   2  #F1F5FF  palest panel        (--color-surface)  */
+/*   3  #E6ECFE  the signature panel blue               */
+/*   4  #CEDAF3  light rule                             */
+/*   5  #A2B3D8  rgb(162,179,216)    (--color-border)   */
+/*   7  #698AC1  soft link blue                         */
+/*   10 #666666  secondary text      (--color-muted)    */
+/*   12 #000000  body text                              */
+/*                                                      */
+/* Chroma is the story: it peaks in the pale blues and  */
+/* decays to exactly zero by step 10, because that is   */
+/* what the site does — blue-tinted chrome resolving to */
+/* neutral grey and black type. So the scale still is   */
+/* not a clean gradient, but now for a measured reason  */
+/* rather than an invented one.                         */
+/*                                                      */
+/* Accents are measured too: primary is the CTA blue    */
+/* rgb(64,112,255), destructive the Yahoo red           */
+/* rgb(235,0,19). Success and warning have no clear     */
+/* counterpart on the page and are harmonised, not      */
+/* sampled.                                             */
+/*                                                      */
+/* Border contrast is 2.11:1 against the page — below   */
+/* the 2.49–4.05 the other light themes sit at, but     */
+/* that IS Yahoo's rule colour, specified exactly.      */
 /* -------------------------------------------------- */
 @media (prefers-color-scheme: light) {
 	:root[data-theme='signalnine']:not(.dark) {
 		color-scheme: light;
 
-		--color-1: oklch(0.972 0.022 96);
-		--color-2: oklch(0.925 0.028 52);
-		--color-3: oklch(0.855 0.038 32);
-		--color-4: oklch(0.78 0.055 28);
-		--color-5: oklch(0.7 0.072 25);
-		--color-6: oklch(0.6 0.1 20);
-		--color-7: oklch(0.52 0.12 18);
-		--color-8: oklch(0.47 0.09 305);
-		--color-9: oklch(0.42 0.125 300);
-		--color-10: oklch(0.37 0.1 296);
-		--color-11: oklch(0.32 0.13 32);
-		--color-12: oklch(0.25 0.145 33);
+		--color-1: oklch(1 0 0); /* #ffffff */
+		--color-2: oklch(0.97 0.014 268.5); /* #f1f5ff */
+		--color-3: oklch(0.944 0.025 271.1); /* #e6ecfe */
+		--color-4: oklch(0.887 0.037 265.1); /* #cedaf3 */
+		--color-5: oklch(0.766 0.0565 265.7); /* #a2b3d8 — rgb(162,179,216) */
+		--color-6: oklch(0.7 0.074 263);
+		--color-7: oklch(0.631 0.0915 260.3); /* #698ac1 */
+		--color-8: oklch(0.585 0.062 261);
+		--color-9: oklch(0.548 0.031 261);
+		--color-10: oklch(0.51 0 0); /* #666666 */
+		--color-11: oklch(0.16 0.008 266);
+		--color-12: oklch(0 0 0); /* #000000 */
 
 		--color-border: var(--color-5);
 		--color-surface: var(--color-2);
-		--color-hover: oklch(0.888 0.034 44);
+		--color-hover: oklch(0.955 0.02 270);
 		--color-fg: var(--color-11);
 		--color-bright: var(--color-12);
 		--color-muted: var(--color-10);
 
-		--color-primary: oklch(0.42 0.21 315);
-		--color-primary-fg: oklch(0.972 0.022 96);
-		--color-primary-hover: color-mix(in oklch, var(--color-primary) 82%, var(--color-destructive));
-		--color-destructive: oklch(0.53 0.24 27);
-		--color-destructive-fg: oklch(0.972 0.022 96);
-		--color-success: oklch(0.5 0.11 158);
-		--color-success-fg: oklch(0.972 0.022 96);
-		--color-warning: oklch(0.72 0.14 78);
-		--color-warning-fg: oklch(0.25 0.145 33);
+		--color-primary: oklch(0.596 0.22 265.8); /* #4070ff */
+		--color-primary-fg: oklch(1 0 0);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
+		--color-destructive-fg: oklch(1 0 0);
+		--color-success: oklch(0.58 0.15 152);
+		--color-success-fg: oklch(1 0 0);
+		--color-warning: oklch(0.76 0.145 80);
+		--color-warning-fg: oklch(0.16 0.008 266);
 	}
 }
 
 [data-theme='signalnine'].light {
 	color-scheme: light;
 
-	--color-1: oklch(0.972 0.022 96);
-	--color-2: oklch(0.925 0.028 52);
-	--color-3: oklch(0.855 0.038 32);
-	--color-4: oklch(0.78 0.055 28);
-	--color-5: oklch(0.7 0.072 25);
-	--color-6: oklch(0.6 0.1 20);
-	--color-7: oklch(0.52 0.12 18);
-	--color-8: oklch(0.47 0.09 305);
-	--color-9: oklch(0.42 0.125 300);
-	--color-10: oklch(0.37 0.1 296);
-	--color-11: oklch(0.32 0.13 32);
-	--color-12: oklch(0.25 0.145 33);
+	--color-1: oklch(1 0 0); /* #ffffff */
+	--color-2: oklch(0.97 0.014 268.5); /* #f1f5ff */
+	--color-3: oklch(0.944 0.025 271.1); /* #e6ecfe */
+	--color-4: oklch(0.887 0.037 265.1); /* #cedaf3 */
+	--color-5: oklch(0.766 0.0565 265.7); /* #a2b3d8 — rgb(162,179,216) */
+	--color-6: oklch(0.7 0.074 263);
+	--color-7: oklch(0.631 0.0915 260.3); /* #698ac1 */
+	--color-8: oklch(0.585 0.062 261);
+	--color-9: oklch(0.548 0.031 261);
+	--color-10: oklch(0.51 0 0); /* #666666 */
+	--color-11: oklch(0.16 0.008 266);
+	--color-12: oklch(0 0 0); /* #000000 */
 
 	--color-border: var(--color-5);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.888 0.034 44);
+	--color-hover: oklch(0.955 0.02 270);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
 	--color-muted: var(--color-10);
 
-	--color-primary: oklch(0.42 0.21 315);
-	--color-primary-fg: oklch(0.972 0.022 96);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 82%, var(--color-destructive));
-	--color-destructive: oklch(0.53 0.24 27);
-	--color-destructive-fg: oklch(0.972 0.022 96);
-	--color-success: oklch(0.5 0.11 158);
-	--color-success-fg: oklch(0.972 0.022 96);
-	--color-warning: oklch(0.72 0.14 78);
-	--color-warning-fg: oklch(0.25 0.145 33);
+	--color-primary: oklch(0.596 0.22 265.8); /* #4070ff */
+	--color-primary-fg: oklch(1 0 0);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
+	--color-destructive-fg: oklch(1 0 0);
+	--color-success: oklch(0.58 0.15 152);
+	--color-success-fg: oklch(1 0 0);
+	--color-warning: oklch(0.76 0.145 80);
+	--color-warning-fg: oklch(0.16 0.008 266);
 }

package/dist/ui/index.d.ts

@@ -48,6 +48,8 @@ export { Input, Textarea } from './input/index.js';
 export { KV } from './kv/index.js';
 export { Label } from './label/index.js';
 export * as LinkPreview from './link-preview/index.js';
+export { Logo } from './logo/index.js';
+export type { LogoPalette, LogoState, LogoParams } from './logo/index.js';
 export { Mode } from './mode/index.js';
 export { Pane, Root as PaneRoot, Handle as PaneHandle, Content as PaneContent, Close as PaneClose, Tabs as PaneTabs, TabList as PaneTabList, Tab as PaneTab, TabPanel as PaneTabPanel } from './pane/index.js';
 export * as Pagination from './pagination/index.js';

package/dist/ui/index.js

@@ -48,6 +48,7 @@ export { Input, Textarea } from './input/index.js';
 export { KV } from './kv/index.js';
 export { Label } from './label/index.js';
 export * as LinkPreview from './link-preview/index.js';
+export { Logo } from './logo/index.js';
 export { Mode } from './mode/index.js';
 export { Pane, Root as PaneRoot, Handle as PaneHandle, Content as PaneContent, Close as PaneClose, Tabs as PaneTabs, TabList as PaneTabList, Tab as PaneTab, TabPanel as PaneTabPanel } from './pane/index.js';
 export * as Pagination from './pagination/index.js';

package/dist/ui/logo/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Logo } from './logo.svelte';
+export { LOGO_STATES, PAL, PALETTES, SPR, REST_LIGHT, FIXED_STEP, wrap, clamp, norm360, oklchToHex, renderLogoMarkup, logoSvgDocument, createSim, integrate, stateFrame } from './logo.svelte';
+export type { LogoPalette, LogoState, LogoParams, LogoSim, HueOverride, Ring, Dof, Fx } from './logo.svelte';

package/dist/ui/logo/index.js

@@ -0,0 +1,2 @@
+export { default as Logo } from './logo.svelte';
+export { LOGO_STATES, PAL, PALETTES, SPR, REST_LIGHT, FIXED_STEP, wrap, clamp, norm360, oklchToHex, renderLogoMarkup, logoSvgDocument, createSim, integrate, stateFrame } from './logo.svelte';