@bakapiano/ccsm 0.10.3 → 0.11.0

package/public/css/tokens.css

@@ -1,79 +1,81 @@
-/* ccsm · design tokens · v0.6 */
-
-:root {
-  /* Surfaces — cream with neutral whites. Sidebar shares the page bg
-     so they read as one continuous surface; separation is just the
-     hairline border on .sidebar. */
-  --bg:            #faf9f5;
-  --bg-elev:       #ffffff;
-  --sidebar-bg:    #faf9f5;
-  --sidebar-hover: #f0ece0;
-  --sidebar-active: #e8e3d5;
-
-  /* Neutral UI chrome — borders, footer strip, etc. These are NEVER
-     re-derived from the accent so dividers stay calm regardless of
-     theme choice. */
-  --ui-border:     #d8d4c6;
-  --ui-border-soft: #e6e2d4;
-  --ui-bg:         #f0ece0;
-
-  /* Borders & rules */
-  --border:        #e8e3d5;
-  --border-soft:   #ece8da;
-  --border-strong: #d4cdb8;
-
-  /* Ink */
-  --ink:        #1a1815;
-  --ink-mid:    #534e44;
-  --ink-muted:  #8a8475;
-  --ink-faint:  #b5af9d;
-
-  /* Accent — Ocean blue. Calm and content-first. Users can override via
-     the Theme accent picker in Settings; that flow rewrites these vars
-     at runtime (state.js · applyAccentCssVars). */
-  --accent:        #2f6fa3;
-  --accent-deep:   #25577f;
-  --accent-soft:   rgba(47, 111, 163, 0.10);
-  --accent-softer: rgba(47, 111, 163, 0.04);
-
-  /* Status */
-  --green:  #4a8a4a;
-  --yellow: #c4892b;
-  --red:    #b73f3f;
-  --blue:   #4a73a5;
-
-  /* Type */
-  --body:    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --display: "Geist", ui-sans-serif, system-ui, sans-serif;
-  --mono:    "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
-
-  /* Scale */
-  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
-  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
-  --s-12: 48px; --s-16: 64px;
-
-  /* Radius — tightened in v1.0 for a more codex-like crisp feel.
-     999px stays in code where pills are intentional (status dots etc). */
-  --r-sm: 3px;
-  --r:    4px;
-  --r-md: 5px;
-  --r-lg: 6px;
-
-  /* Shadow — soft, like print on cream */
-  --shadow-sm: 0 1px 0 rgba(26, 24, 21, 0.04);
-  --shadow:    0 1px 2px rgba(26, 24, 21, 0.04),
-               0 1px 0 rgba(26, 24, 21, 0.03);
-  --shadow-md: 0 4px 12px -2px rgba(26, 24, 21, 0.08),
-               0 1px 0 rgba(26, 24, 21, 0.04);
-  --shadow-lg: 0 18px 40px -16px rgba(26, 24, 21, 0.18),
-               0 4px 12px -4px rgba(26, 24, 21, 0.10);
-
-  /* Subtle paper grain — applied as a layered background on .app to give
-     surfaces the texture of laid paper rather than flat color. SVG noise
-     keeps it crisp at any zoom level. */
-  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
-
-  /* Sidebar geometry */
-  --sidebar-w:           232px;
-  --sidebar-w-collapsed: 44px;
-}
+/* ccsm · design tokens · v0.6 */
+
+:root {
+  /* Surfaces — pale near-white tinted with the default Ocean accent.
+     These match what state.js · applyAccentCssVars computes for the
+     #2f6fa3 default, so the first paint (before the inline accent
+     script in index.html runs) never flashes the old warm-cream bg. */
+  --bg:            #f6f8fa;
+  --bg-elev:       #ffffff;
+  --sidebar-bg:    #f6f8fa;
+  --sidebar-hover: #e2ebf3;
+  --sidebar-active: #d3e1ed;
+
+  /* Neutral UI chrome — borders, footer strip, etc. These are NEVER
+     re-derived from the accent so dividers stay calm regardless of
+     theme choice. */
+  --ui-border:     #d8d4c6;
+  --ui-border-soft: #e6e2d4;
+  --ui-bg:         #e2ebf3;
+
+  /* Borders & rules — tinted with the default Ocean accent to match
+     what state.js writes at boot. */
+  --border:        #d3e1ed;
+  --border-soft:   #d8e4ee;
+  --border-strong: #c0d5e5;
+
+  /* Ink */
+  --ink:        #1a1815;
+  --ink-mid:    #534e44;
+  --ink-muted:  #8a8475;
+  --ink-faint:  #b5af9d;
+
+  /* Accent — Ocean blue. Calm and content-first. Users can override via
+     the Theme accent picker in Settings; that flow rewrites these vars
+     at runtime (state.js · applyAccentCssVars). */
+  --accent:        #2f6fa3;
+  --accent-deep:   #25577f;
+  --accent-soft:   rgba(47, 111, 163, 0.10);
+  --accent-softer: rgba(47, 111, 163, 0.04);
+
+  /* Status */
+  --green:  #4a8a4a;
+  --yellow: #c4892b;
+  --red:    #b73f3f;
+  --blue:   #4a73a5;
+
+  /* Type */
+  --body:    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --display: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --mono:    "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
+
+  /* Scale */
+  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
+  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
+  --s-12: 48px; --s-16: 64px;
+
+  /* Radius — tightened in v1.0 for a more codex-like crisp feel.
+     999px stays in code where pills are intentional (status dots etc). */
+  --r-sm: 3px;
+  --r:    4px;
+  --r-md: 5px;
+  --r-lg: 6px;
+
+  /* Shadow — soft, like print on cream */
+  --shadow-sm: 0 1px 0 rgba(26, 24, 21, 0.04);
+  --shadow:    0 1px 2px rgba(26, 24, 21, 0.04),
+               0 1px 0 rgba(26, 24, 21, 0.03);
+  --shadow-md: 0 4px 12px -2px rgba(26, 24, 21, 0.08),
+               0 1px 0 rgba(26, 24, 21, 0.04);
+  --shadow-lg: 0 18px 40px -16px rgba(26, 24, 21, 0.18),
+               0 4px 12px -4px rgba(26, 24, 21, 0.10);
+
+  /* Subtle paper grain — applied as a layered background on .app to give
+     surfaces the texture of laid paper rather than flat color. SVG noise
+     keeps it crisp at any zoom level. */
+  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+
+  /* Sidebar geometry */
+  --sidebar-w:           232px;
+  --sidebar-w-collapsed: 44px;
+}

package/public/css/wco.css

@@ -1,98 +1,98 @@
-/* PWA / --app= window drag regions.
- *
- * `-webkit-app-region: drag` is a Chromium-only property; it has effect in
- * Electron, installed PWA windows, AND in `--app=` chromeless mode where
- * the manifest's display_override unlocks WCO-ish behaviour. In a plain
- * browser tab it's silently ignored. We therefore apply it *unconditionally*
- * (no `@media (display-mode: …)` gate) so any surface that does honour it
- * gets the drag handles — particularly the case where Edge `--app=` reads
- * our manifest, hides its own OS title bar, but still reports
- * display-mode: browser. Without unconditional rules, that window has
- * neither a native title bar to grab NOR app-region drag → undraggable.
- */
-
-.sidebar-brand,
-.sidebar-top,
-.page-title-bar,
-.page-head,
-.page-head-inner,
-.page-title,
-.page-subtitle {
-  -webkit-app-region: drag;
-  app-region: drag;
-}
-
-/* Any interactive element opts out of drag so click / focus / scroll
-   still reach the page. */
-button, a, input, select, textarea, label,
-.nav-item, .util-item, .collapse-toggle,
-.action, .server-status,
-.star-btn, .rename-btn, .card-fold, .modal-close,
-.chip, .radio, .fab,
-.ph-stat, .ph-divider,
-.page-title-bar-actions,
-.session-title-action {
-  -webkit-app-region: no-drag;
-  app-region: no-drag;
-}
-
-body.is-app .sidebar-brand,
-body.is-app .sidebar-top,
-body.is-app .page-title-bar,
-body.is-app .page-head,
-body.is-app .page-head-inner,
-body.is-app .page-title,
-body.is-app .page-subtitle {
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* In an app/PWA window, the OS title bar is hidden and only floating
-   close/max/min controls remain in the top-right. The 40px top band of
-   ccsm (sidebar-top + page-title-bar) IS that title bar — it's already
-   tall enough, sits at y=0 with no extra padding, and gets a drag region
-   so the user can grab anywhere along it to move the window. */
-body.is-app .sidebar { padding-top: 0; }
-body.is-app .main    { padding-top: 0; }
-
-/* Reserve room on the right of page-title-bar so its action buttons don't
-   slide under the floating OS controls. 150px covers Windows controls
-   (~46px each × 3) with breathing room; macOS traffic lights are on the
-   left so this padding is harmless there. WCO override below uses the
-   precise env() value when available. */
-body.is-app .page-title-bar {
-  padding-right: calc(var(--s-4) + 150px);
-}
-
-body.is-app .page-title,
-body.is-app .page-subtitle {
-  display: none;
-}
-body.is-app .page-head {
-  padding-bottom: 0;
-  border-bottom: 0;
-  align-items: center;
-  min-height: 28px;
-}
-
-/* PWA / WCO / --app= mode: shrink the top band to 32px so its mid-line
-   matches the OS-floated close/max/min icons (which sit in a fixed ~32px
-   bar at y=0 and can't be moved). Outside app mode we keep the roomier
-   40px band — see sidebar.css / layout.css. */
-body.is-app .page-title-bar,
-body.is-app .sidebar-top {
-  height: 32px;
-  min-height: 32px;
-}
-body.is-app .sidebar-brand,
-body.is-app .sidebar-brand-button,
-body.is-app .collapse-toggle {
-  height: 32px;
-  min-height: 32px;
-}
-
-@media (display-mode: window-controls-overlay) {
-  body.is-app .page-title-bar {
-    padding-right: calc(var(--s-4) + 100vw - env(titlebar-area-width, 100vw));
-  }
-}
+/* PWA / --app= window drag regions.
+ *
+ * `-webkit-app-region: drag` is a Chromium-only property; it has effect in
+ * Electron, installed PWA windows, AND in `--app=` chromeless mode where
+ * the manifest's display_override unlocks WCO-ish behaviour. In a plain
+ * browser tab it's silently ignored. We therefore apply it *unconditionally*
+ * (no `@media (display-mode: …)` gate) so any surface that does honour it
+ * gets the drag handles — particularly the case where Edge `--app=` reads
+ * our manifest, hides its own OS title bar, but still reports
+ * display-mode: browser. Without unconditional rules, that window has
+ * neither a native title bar to grab NOR app-region drag → undraggable.
+ */
+
+.sidebar-brand,
+.sidebar-top,
+.page-title-bar,
+.page-head,
+.page-head-inner,
+.page-title,
+.page-subtitle {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+/* Any interactive element opts out of drag so click / focus / scroll
+   still reach the page. */
+button, a, input, select, textarea, label,
+.nav-item, .util-item, .collapse-toggle,
+.action, .server-status,
+.star-btn, .rename-btn, .card-fold, .modal-close,
+.chip, .radio, .fab,
+.ph-stat, .ph-divider,
+.page-title-bar-actions,
+.session-title-action {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+body.is-app .sidebar-brand,
+body.is-app .sidebar-top,
+body.is-app .page-title-bar,
+body.is-app .page-head,
+body.is-app .page-head-inner,
+body.is-app .page-title,
+body.is-app .page-subtitle {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* In an app/PWA window, the OS title bar is hidden and only floating
+   close/max/min controls remain in the top-right. The 40px top band of
+   ccsm (sidebar-top + page-title-bar) IS that title bar — it's already
+   tall enough, sits at y=0 with no extra padding, and gets a drag region
+   so the user can grab anywhere along it to move the window. */
+body.is-app .sidebar { padding-top: 0; }
+body.is-app .main    { padding-top: 0; }
+
+/* Reserve room on the right of page-title-bar so its action buttons don't
+   slide under the floating OS controls. 150px covers Windows controls
+   (~46px each × 3) with breathing room; macOS traffic lights are on the
+   left so this padding is harmless there. WCO override below uses the
+   precise env() value when available. */
+body.is-app .page-title-bar {
+  padding-right: calc(var(--s-4) + 150px);
+}
+
+body.is-app .page-title,
+body.is-app .page-subtitle {
+  display: none;
+}
+body.is-app .page-head {
+  padding-bottom: 0;
+  border-bottom: 0;
+  align-items: center;
+  min-height: 28px;
+}
+
+/* PWA / WCO / --app= mode: shrink the top band to 32px so its mid-line
+   matches the OS-floated close/max/min icons (which sit in a fixed ~32px
+   bar at y=0 and can't be moved). Outside app mode we keep the roomier
+   40px band — see sidebar.css / layout.css. */
+body.is-app .page-title-bar,
+body.is-app .sidebar-top {
+  height: 32px;
+  min-height: 32px;
+}
+body.is-app .sidebar-brand,
+body.is-app .sidebar-brand-button,
+body.is-app .collapse-toggle {
+  height: 32px;
+  min-height: 32px;
+}
+
+@media (display-mode: window-controls-overlay) {
+  body.is-app .page-title-bar {
+    padding-right: calc(var(--s-4) + 100vw - env(titlebar-area-width, 100vw));
+  }
+}