@zylem/ui 0.8.8 → 0.8.11

package/src/components/ColorPalette/ColorPalette.tsx

@@ -0,0 +1,78 @@
+import { For, Show } from 'solid-js';
+import { AddTile } from '../AddTile/AddTile';
+
+/** Sentinel colour for the eraser / transparent swatch. */
+export const TRANSPARENT = 'transparent';
+
+export interface SwatchProps {
+  /** Any CSS colour, or `'transparent'` for the checkered swatch. */
+  color: string;
+  selected?: boolean;
+  onClick?: (event: MouseEvent) => void;
+  /** Accessible name; defaults to the colour string. */
+  label?: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+/** One palette colour: a small glass-edged square, ringed when selected. */
+export function Swatch(props: SwatchProps) {
+  const transparent = () => props.color === TRANSPARENT;
+  return (
+    <button
+      type="button"
+      class={props.class ? `zylem-swatch ${props.class}` : 'zylem-swatch'}
+      style={transparent() ? undefined : { '--zylem-swatch-color': props.color }}
+      data-transparent={transparent() ? '' : undefined}
+      data-selected={props.selected ? '' : undefined}
+      aria-pressed={props.selected ? 'true' : 'false'}
+      aria-label={props.label ?? (transparent() ? 'Transparent' : props.color)}
+      title={props.label ?? (transparent() ? 'Transparent' : props.color)}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    />
+  );
+}
+
+export interface ColorPaletteProps {
+  colors: readonly string[];
+  /** Currently selected colour (compare with `colors` entries or `'transparent'`). */
+  value?: string;
+  onSelect?: (color: string) => void;
+  /** When provided, an add tile follows the swatches. */
+  onAdd?: () => void;
+  /** Lead with the transparent swatch. Defaults to true. */
+  includeTransparent?: boolean;
+  class?: string;
+}
+
+/** Row of swatches with an optional transparent lead and add tile. */
+export function ColorPalette(props: ColorPaletteProps) {
+  return (
+    <div
+      role="listbox"
+      aria-label="Palette"
+      class={props.class ? `zylem-palette ${props.class}` : 'zylem-palette'}
+    >
+      <Show when={props.includeTransparent ?? true}>
+        <Swatch
+          color={TRANSPARENT}
+          selected={props.value === TRANSPARENT}
+          onClick={() => props.onSelect?.(TRANSPARENT)}
+        />
+      </Show>
+      <For each={props.colors}>
+        {(color) => (
+          <Swatch
+            color={color}
+            selected={props.value === color}
+            onClick={() => props.onSelect?.(color)}
+          />
+        )}
+      </For>
+      <Show when={props.onAdd}>
+        <AddTile label="Add color" onClick={() => props.onAdd?.()} />
+      </Show>
+    </div>
+  );
+}

package/src/components/Dialog/Dialog.css.ts

@@ -32,8 +32,12 @@ globalStyle('.zylem-dialog-positioner', {
 });
 
 globalStyle('.zylem-dialog-content', {
+  display: 'flex',
+  flexDirection: 'column',
   width: '100%',
   maxWidth: '440px',
+  maxHeight: '100%',
+  minHeight: 0,
   borderRadius: vars.radii.window,
   border: '1px solid rgba(146, 205, 255, 0.54)',
   background: vars.material.glassPanelDark,
@@ -48,19 +52,41 @@ globalStyle('.zylem-dialog-content', {
   },
 });
 
+globalStyle('.zylem-dialog-content[data-size="lg"]', {
+  maxWidth: '760px',
+});
+
+// Fullscreen fills the positioner (viewport minus its padding). The body takes
+// whatever height the header and footer leave, so browser-style content can
+// hand scrolling to its own columns.
+globalStyle('.zylem-dialog-content[data-size="fullscreen"]', {
+  maxWidth: 'none',
+  height: '100%',
+  borderRadius: vars.radii.card,
+});
+
 globalStyle('.zylem-dialog-header', {
+  flex: 'none',
   minHeight: '40px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  gap: vars.spacing.sm,
-  padding: `0 ${vars.spacing.md}`,
+  gap: vars.spacing.md,
+  padding: `${vars.spacing.xs} ${vars.spacing.md}`,
   background: vars.material.glossyBar,
   borderBottom: '1px solid rgba(5, 18, 32, 0.85)',
   boxShadow:
     'inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(255,255,255,0.08)',
 });
 
+globalStyle('.zylem-dialog-titles', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2px',
+  flex: '1 1 auto',
+  minWidth: 0,
+});
+
 globalStyle('.zylem-dialog-title', {
   margin: 0,
   fontSize: '13px',
@@ -71,7 +97,26 @@ globalStyle('.zylem-dialog-title', {
   textShadow: '0 1px 1px rgba(0,0,0,0.65)',
 });
 
+globalStyle('.zylem-dialog-subtitle', {
+  margin: 0,
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  fontWeight: 500,
+  color: 'rgba(232, 244, 255, 0.78)',
+  fontFamily: vars.typography.fontFamily,
+  textShadow: '0 1px 1px rgba(0,0,0,0.5)',
+});
+
+globalStyle('.zylem-dialog-header-extra', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  flex: 'none',
+});
+
 globalStyle('.zylem-dialog-body', {
+  flex: '1 1 auto',
+  minHeight: 0,
+  overflow: 'auto',
   padding: vars.spacing.lg,
   color: vars.colors.text,
   fontFamily: vars.typography.fontFamily,
@@ -79,9 +124,31 @@ globalStyle('.zylem-dialog-body', {
   lineHeight: 1.45,
 });
 
+// In fullscreen the body and its layer scope become flex columns so content
+// can lay out against the dialog's height (and own its scrolling).
+globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-body', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-scope', {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  minHeight: 0,
+});
+
 globalStyle('.zylem-dialog-footer', {
+  flex: 'none',
   display: 'flex',
+  alignItems: 'center',
   justifyContent: 'flex-end',
   gap: vars.spacing.sm,
   padding: `0 ${vars.spacing.lg} ${vars.spacing.lg}`,
 });
+
+globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-footer', {
+  padding: `${vars.spacing.sm} ${vars.spacing.lg}`,
+  borderTop: '1px solid rgba(97, 166, 232, 0.28)',
+  background: 'rgba(4, 12, 20, 0.6)',
+});

package/src/components/Dialog/Dialog.tsx

@@ -5,13 +5,29 @@ import { createDismissGuard, LayerScope, useLayer } from '../../layers';
 import { Button } from '../Button/Button';
 import { WindowControls } from '../WindowControls/WindowControls';
 
+/**
+ * Card width. `md` is the default 440px card, `lg` a 760px card for forms
+ * with two columns, and `fullscreen` fills the viewport (minus a margin) with
+ * the body taking the remaining height — the shell for browser-style pickers.
+ */
+export type DialogSize = 'md' | 'lg' | 'fullscreen';
+
 export interface DialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   title?: JSX.Element;
+  /** Secondary line under the title. */
+  subtitle?: JSX.Element;
+  /** Content between the titles and the close control, e.g. a search field. */
+  headerExtra?: JSX.Element;
+  size?: DialogSize;
   children: JSX.Element;
   /** Optional footer content (e.g. action buttons). */
   footer?: JSX.Element;
+  /** Extra class on the card. */
+  class?: string;
+  /** Extra class on the body, e.g. to hand scrolling to the content's columns. */
+  bodyClass?: string;
 }
 
 /**
@@ -43,19 +59,31 @@ export function Dialog(props: DialogProps) {
             <div class="zylem-dialog-positioner">
               <KDialog.Content
                 ref={dismiss.ref}
-                class="zylem-dialog-content"
+                class={props.class ? `zylem-dialog-content ${props.class}` : 'zylem-dialog-content'}
+                data-size={props.size}
                 onInteractOutside={dismiss.onInteractOutside}
               >
                 <div class="zylem-dialog-header">
-                  <Show when={props.title}>
-                    <KDialog.Title class="zylem-dialog-title">
-                      {props.title}
-                    </KDialog.Title>
+                  <Show when={props.title || props.subtitle}>
+                    <div class="zylem-dialog-titles">
+                      <Show when={props.title}>
+                        <KDialog.Title class="zylem-dialog-title">{props.title}</KDialog.Title>
+                      </Show>
+                      <Show when={props.subtitle}>
+                        <p class="zylem-dialog-subtitle">{props.subtitle}</p>
+                      </Show>
+                    </div>
+                  </Show>
+                  <Show when={props.headerExtra}>
+                    <div class="zylem-dialog-header-extra">{props.headerExtra}</div>
                   </Show>
                   <WindowControls onClose={() => props.onOpenChange?.(false)} />
                 </div>
-                <KDialog.Description as="div" class="zylem-dialog-body">
-                  <LayerScope>{props.children}</LayerScope>
+                <KDialog.Description
+                  as="div"
+                  class={props.bodyClass ? `zylem-dialog-body ${props.bodyClass}` : 'zylem-dialog-body'}
+                >
+                  <LayerScope class="zylem-dialog-scope">{props.children}</LayerScope>
                 </KDialog.Description>
                 <Show when={props.footer}>
                   <div class="zylem-dialog-footer">{props.footer}</div>

package/src/components/DropdownMenu/DropdownMenu.css.ts

@@ -61,6 +61,28 @@ globalStyle('.zylem-dropdown-item--danger[data-highlighted]', {
   color: '#FFD9D3',
 });
 
+globalStyle('.zylem-dropdown-label', {
+  flex: '1 1 auto',
+  minWidth: 0,
+});
+
+// Check column, reserved on every row of a menu that has a checkable item.
+globalStyle('.zylem-dropdown-check', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 'none',
+  width: '14px',
+  height: '14px',
+  marginRight: `calc(${vars.spacing.xs} * -1)`,
+});
+
+globalStyle('.zylem-dropdown-check svg', {
+  width: '13px',
+  height: '13px',
+  stroke: 'currentColor',
+});
+
 globalStyle('.zylem-dropdown-shortcut', {
   fontSize: `calc(${vars.typography.fontSize} - 3px)`,
   color: vars.colors.textSecondary,

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import { DropdownMenu as KDropdownMenu } from '@kobalte/core';
+import Check from 'lucide-solid/icons/check';
 import { For, Show } from 'solid-js';
 import type { JSX } from 'solid-js';
 import { createDismissGuard, useLayer } from '../../layers';
@@ -10,6 +11,12 @@ export interface DropdownMenuItemConfig {
   shortcut?: string;
   disabled?: boolean;
   danger?: boolean;
+  /**
+   * Render as a checkable item showing this state. Selecting it still calls
+   * `onSelect`; the owner decides what the new state is (a plain toggle, or
+   * one-of-many the way a stage picker works).
+   */
+  checked?: boolean;
   /** Render a separator line above this item. */
   separatorAbove?: boolean;
 }
@@ -24,40 +31,80 @@ export interface DropdownMenuProps {
 }
 
 /**
- * HyperGlass dropdown menu: floating glass sheet with highlight rows.
+ * The rows of a menu. Shared by `DropdownMenu` and `Menubar`, whose Kobalte
+ * parts are the same underlying menu primitives, so it may be rendered inside
+ * either one's content.
  *
- * Portals into the layer container for its tree at the `menu` tier, so it opens
- * over panels and dialogs and stays styled inside a shadow root.
+ * A menu with any checkable row reserves the check column on every row so
+ * labels line up.
  */
-export function DropdownMenu(props: DropdownMenuProps) {
-  const layer = useLayer('menu');
-  const dismiss = createDismissGuard();
+export function MenuItems(props: { items: DropdownMenuItemConfig[] }) {
+  const hasChecks = () => props.items.some((item) => item.checked !== undefined);
 
-  const items = () => (
+  const body = (item: DropdownMenuItemConfig) => (
+    <>
+      <Show when={hasChecks()}>
+        <span class="zylem-dropdown-check" aria-hidden="true">
+          <Show when={item.checked !== undefined}>
+            <KDropdownMenu.ItemIndicator>
+              <Check />
+            </KDropdownMenu.ItemIndicator>
+          </Show>
+        </span>
+      </Show>
+      <span class="zylem-dropdown-label">{item.label}</span>
+      <Show when={item.shortcut}>
+        <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
+      </Show>
+    </>
+  );
+
+  const itemClass = (item: DropdownMenuItemConfig) =>
+    item.danger ? 'zylem-dropdown-item zylem-dropdown-item--danger' : 'zylem-dropdown-item';
+
+  return (
     <For each={props.items}>
       {(item) => (
         <>
           <Show when={item.separatorAbove}>
             <KDropdownMenu.Separator class="zylem-dropdown-separator" />
           </Show>
-          <KDropdownMenu.Item
-            class={
-              item.danger
-                ? 'zylem-dropdown-item zylem-dropdown-item--danger'
-                : 'zylem-dropdown-item'
+          <Show
+            when={item.checked !== undefined}
+            fallback={
+              <KDropdownMenu.Item
+                class={itemClass(item)}
+                disabled={item.disabled}
+                onSelect={item.onSelect}
+              >
+                {body(item)}
+              </KDropdownMenu.Item>
             }
-            disabled={item.disabled}
-            onSelect={item.onSelect}
           >
-            <span>{item.label}</span>
-            <Show when={item.shortcut}>
-              <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
-            </Show>
-          </KDropdownMenu.Item>
+            <KDropdownMenu.CheckboxItem
+              class={itemClass(item)}
+              checked={item.checked}
+              disabled={item.disabled}
+              onSelect={item.onSelect}
+            >
+              {body(item)}
+            </KDropdownMenu.CheckboxItem>
+          </Show>
         </>
       )}
     </For>
   );
+}
+
+/**
+ * HyperGlass dropdown menu: floating glass sheet with highlight rows.
+ *
+ * Portals into the layer container for its tree at the `menu` tier, so it opens
+ * over panels and dialogs and stays styled inside a shadow root.
+ */
+export function DropdownMenu(props: DropdownMenuProps) {
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
 
   return (
     <KDropdownMenu.Root placement={props.placement ?? 'bottom-start'}>
@@ -72,7 +119,7 @@ export function DropdownMenu(props: DropdownMenuProps) {
               class="zylem-dropdown-content"
               onInteractOutside={dismiss.onInteractOutside}
             >
-              {items()}
+              <MenuItems items={props.items} />
             </KDropdownMenu.Content>
           </KDropdownMenu.Portal>
         )}

package/src/components/EmptyState/EmptyState.css.ts

@@ -27,3 +27,12 @@ globalStyle('.zylem-empty-state-message', {
   lineHeight: 1.45,
   maxWidth: '360px',
 });
+
+// One or several actions side by side, wrapping on narrow hosts.
+globalStyle('.zylem-empty-state-actions', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  gap: vars.spacing.sm,
+  marginTop: vars.spacing.xs,
+});

package/src/components/EmptyState/EmptyState.tsx

@@ -26,7 +26,9 @@ export function EmptyState(props: EmptyStateProps) {
       <Show when={props.children}>
         <div class="zylem-empty-state-message">{props.children}</div>
       </Show>
-      {props.action}
+      <Show when={props.action}>
+        <div class="zylem-empty-state-actions">{props.action}</div>
+      </Show>
     </div>
   );
 }

package/src/components/FrameStrip/FrameStrip.css.ts

@@ -0,0 +1,138 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import { FRAME_SIZE } from '../AddTile/AddTile.css';
+import { checkerBackground } from '../PixelGrid/PixelGrid.css';
+import { artCaption } from '../ToolGroup/ToolGroup.css';
+
+globalStyle('.zylem-frame-strip', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.sm,
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-frame-strip-header', {
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-frame-strip-label', artCaption);
+
+globalStyle('.zylem-frame-strip-title', {
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  color: vars.colors.text,
+});
+
+globalStyle('.zylem-frame-strip-row', {
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: vars.spacing.sm,
+  padding: `${vars.spacing.xs} ${vars.spacing.xs} ${vars.spacing.sm}`,
+  overflowX: 'auto',
+  overflowY: 'hidden',
+});
+
+// Thumb: checker surface with the frame number in a glass badge beneath.
+globalStyle('.zylem-frame-thumb', {
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 'none',
+  width: FRAME_SIZE,
+  height: `calc(${FRAME_SIZE} + 18px)`,
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(150, 210, 255, 0.4)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  color: '#E8F4FF',
+  fontFamily: vars.typography.fontFamily,
+  transition: `border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-frame-thumb:hover', {
+  borderColor: 'rgba(178, 219, 255, 0.8)',
+  transform: 'translateY(-1px)',
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-frame-thumb:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-frame-thumb[data-selected]', {
+  borderColor: 'rgba(178, 219, 255, 0.95)',
+  boxShadow: `${vars.effects.shadowInset}, 0 0 0 1px rgba(178, 219, 255, 0.6), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-frame-thumb-surface', {
+  position: 'relative',
+  display: 'block',
+  flex: 'none',
+  width: '100%',
+  aspectRatio: '1 / 1',
+  vars: { '--zylem-pixel-grid-cell': '6px' },
+  background: checkerBackground,
+  imageRendering: 'pixelated',
+});
+
+globalStyle(
+  '.zylem-frame-thumb-surface > canvas, .zylem-frame-thumb-surface > img, .zylem-frame-thumb-surface > svg',
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    imageRendering: 'pixelated',
+  }
+);
+
+globalStyle('.zylem-frame-thumb-index', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '1 1 auto',
+  fontSize: '11px',
+  fontWeight: 600,
+  fontVariantNumeric: 'tabular-nums',
+  lineHeight: 1,
+  background: vars.material.panelHeaderGloss,
+  borderTop: '1px solid rgba(150, 210, 255, 0.25)',
+});
+
+// Actions row: commands left, step arrows right, all vertically centered.
+globalStyle('.zylem-frame-actions', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-frame-actions .zylem-button .zylem-icon', {
+  width: '14px',
+  height: '14px',
+  stroke: 'currentColor',
+});
+
+globalStyle('.zylem-frame-actions-spacer', {
+  flex: '1 1 auto',
+});
+
+globalStyle('.zylem-frame-actions-group', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+});
+
+globalStyle('.zylem-frame-actions-step', {
+  width: '34px',
+  padding: 0,
+});