@dataworkz/crystal 0.1.0-beta.0 → 0.1.0-beta.10

package/styles/components/surface.css

@@ -406,8 +406,8 @@
 .dw-avatar--tint-cyan { background: var(--dw-icon-tint-cyan); color: var(--dw-icon-tint-cyan-fg); }
 .dw-avatar--tint-pink { background: var(--dw-icon-tint-pink); color: var(--dw-icon-tint-pink-fg); }
 
-/* Ring (account menus): the border darkens while its button is hovered or open,
-   like the other header controls (e.g. the tenant switcher). */
+/* Ring (e.g. an account menu button): the border darkens while its button is hovered or open,
+   like other header controls. */
 .dw-avatar--ring { transition: border-color var(--dw-dur-micro); }
 
 button:hover > dw-avatar .dw-avatar--ring,
@@ -703,3 +703,39 @@ div.dw-section__header { cursor: default; }
 .p-splitter.dw-splitter--rail-start > .p-splitter-gutter {
   background: linear-gradient(to right, var(--dw-surface-rail) 50%, transparent 50%);
 }
+
+/* ── dw-splitter (the component): the same flat panes and hairline gutter, the gutter holding a
+   dw-resizer. The pane sizes are flex-grow ratios set by the component; the handle is a zero-size
+   anchor at the gutter's centre that the resizer's 10px hit strip straddles. The resizer's own line
+   and grip are hidden: the hairline is the gutter's. ── */
+.dw-splitter--horizontal,
+.dw-splitter--vertical { display: flex; height: 100%; min-width: 0; min-height: 0; }
+.dw-splitter--horizontal { flex-direction: row; }
+.dw-splitter--vertical { flex-direction: column; }
+.dw-splitter__pane { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
+.dw-splitter__pane > * { flex: 1 1 auto; height: 100%; min-width: 0; min-height: 0; }
+.dw-splitter__gutter { position: relative; flex: 0 0 auto; background: transparent; }
+.dw-splitter--horizontal > .dw-splitter__gutter { cursor: col-resize; }
+.dw-splitter--vertical > .dw-splitter__gutter { cursor: row-resize; }
+.dw-splitter__gutter::before {
+  content: '';
+  position: absolute;
+  background: var(--dw-border);
+  transition: background var(--dw-dur-micro) var(--dw-ease);
+}
+.dw-splitter--horizontal > .dw-splitter__gutter::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
+.dw-splitter--vertical > .dw-splitter__gutter::before { top: 50%; right: 0; left: 0; height: 1px; transform: translateY(-50%); }
+.dw-splitter--horizontal > .dw-splitter__gutter:is(:hover, .is-dragging, :has(.dw-resizer:focus-visible))::before { width: 2px; background: var(--dw-accent); }
+.dw-splitter--vertical > .dw-splitter__gutter:is(:hover, .is-dragging, :has(.dw-resizer:focus-visible))::before { height: 2px; background: var(--dw-accent); }
+.dw-splitter__handle { position: absolute; }
+.dw-splitter--horizontal > .dw-splitter__gutter > .dw-splitter__handle { top: 0; bottom: 0; left: 50%; width: 0; }
+.dw-splitter--vertical > .dw-splitter__gutter > .dw-splitter__handle { top: 50%; right: 0; left: 0; height: 0; }
+.dw-splitter__handle > .dw-resizer::before,
+.dw-splitter__handle > .dw-resizer::after { display: none; }
+.dw-splitter.is-resizing { user-select: none; }
+.dw-splitter--rail-start.dw-splitter--horizontal > .dw-splitter__gutter {
+  background: linear-gradient(to right, var(--dw-surface-rail) 50%, transparent 50%);
+}
+.dw-splitter--rail-start.dw-splitter--vertical > .dw-splitter__gutter {
+  background: linear-gradient(to bottom, var(--dw-surface-rail) 50%, transparent 50%);
+}

package/styles/components/toast.css

@@ -1,4 +1,4 @@
-/* ── Toasts (dw-toast-host): today's dataworkz-ui look, ported from app-notifications ──
+/* ── Toasts (dw-toast-host) ──
    Rounded pills in the status colours, stacked under the top edge, centred on half the page width.
    z-index 9999 as today: it keeps toasts above PrimeNG overlays, whose z-index grows with every one opened. */
 .dw-toast-host { display: contents; }

package/styles/crystal-no-fonts.css

@@ -1,10 +1,11 @@
 /*
  * @dataworkz/crystal — the full app theme without @font-face, shipped as @dataworkz/crystal/styles/crystal-no-fonts.css.
- * For a page that already loads Inter and IBM Plex Mono itself. Same order as dataworkz-ui's src/styles/index.css,
- * minus its legacy CSS and app-header.css (they stay in the app).
+ * For a page that already loads Inter and IBM Plex Mono itself. Same layers and order as crystal.css.
  *
  * Rules: colours only in tokens/primitives.css (everything else uses semantic tokens); font-family only in base.css.
  */
+/* PrimeIcons (pi pi-*): crystal's dependency, so an app never installs or loads it itself. Its font is local. */
+@import './icons.css';
 @import './tokens/primitives.css';
 @import './tokens/semantic.css';
 @import './tokens/semantic-dark.css';

package/styles/icons.css

@@ -0,0 +1,6 @@
+/*
+ * @dataworkz/crystal — the PrimeIcons font (`pi pi-*`, `<dw-icon pi>`), shipped as @dataworkz/crystal/styles/icons.css.
+ * Crystal depends on primeicons, so an app never installs or loads it itself: crystal.css / crystal-no-fonts.css import
+ * this file; an app that imports crystal's styles file by file imports it too. The font files are local (no CDN).
+ */
+@import 'primeicons/primeicons.css';

package/styles/tokens/primitives.css

@@ -1,8 +1,6 @@
 /* ============================================================================
    Dataworkz Design System — PRIMITIVE tokens
-   Source of truth: designs/dataworkz-design-system/handoff/design-system.html
-
-   This is the ONLY file in the app allowed to contain raw color literals.
+   This is the ONLY file in the theme allowed to contain raw color literals.
    Components never consume primitives directly — they consume the semantic
    role tokens in semantic.css, which point at these. A future dark theme only
    re-points the semantic layer.

package/styles/tokens/semantic-dark.css

@@ -1,7 +1,7 @@
 /* ============================================================================
    Dataworkz Design System — DARK theme
    Re-points the semantic roles of semantic.css when <html data-theme="dark">
-   (set by core/theme/theme.service.ts). Same names, darker values — component
+   (set by ThemeService / provideCrystal()). Same names, darker values — component
    CSS never changes. Tints are colour-mixed over transparent so they sit on any
    dark surface. Loaded after semantic.css, so these win on the root element.
    ============================================================================ */