@zylem/ui 0.8.8 → 0.8.11

package/src/components/Sidebar/Sidebar.css.ts

@@ -19,6 +19,14 @@ globalStyle('.sidebar', {
   },
 });
 
+globalStyle('.sidebar--borderless', {
+  height: 'auto',
+  overflow: 'visible',
+  background: 'none',
+  borderRight: 'none',
+  backdropFilter: 'none',
+});
+
 globalStyle('.sidebar-section', {
   display: 'flex',
   flexDirection: 'column',

package/src/components/Sidebar/Sidebar.tsx

@@ -3,6 +3,12 @@ import type { JSX } from 'solid-js';
 
 export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
   children?: JSX.Element;
+  /**
+   * Drop the glass surface and trailing border so the list sits inside a
+   * panel that already draws them (an inspector rail, a dialog column).
+   * It also stops filling its container, so it stacks with siblings.
+   */
+  borderless?: boolean;
 }
 
 /**
@@ -10,10 +16,12 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
  * and `SidebarItem`.
  */
 export function Sidebar(props: SidebarProps) {
-  const [local, rest] = splitProps(props, ['children', 'class']);
+  const [local, rest] = splitProps(props, ['children', 'class', 'borderless']);
   return (
     <aside
-      class={local.class ? `sidebar zylem-scroll ${local.class}` : 'sidebar zylem-scroll'}
+      class={['sidebar', 'zylem-scroll', local.borderless ? 'sidebar--borderless' : '', local.class ?? '']
+        .filter(Boolean)
+        .join(' ')}
       {...rest}
     >
       {local.children}

package/src/components/Slider/Slider.tsx

@@ -5,6 +5,11 @@ export interface SliderProps {
   label?: string;
   value?: number;
   onChange?: (value: number) => void;
+  /**
+   * Fires once when a drag or key press finishes, with the final value. Lets
+   * an editor record one undo step per gesture while `onChange` previews.
+   */
+  onCommit?: (value: number) => void;
   minValue?: number;
   maxValue?: number;
   step?: number;
@@ -23,6 +28,7 @@ export function Slider(props: SliderProps) {
       class={props.class ? `zylem-slider-root ${props.class}` : 'zylem-slider-root'}
       value={props.value !== undefined ? [props.value] : undefined}
       onChange={(values) => props.onChange?.(values[0])}
+      onChangeEnd={(values) => props.onCommit?.(values[0])}
       minValue={props.minValue}
       maxValue={props.maxValue}
       step={props.step}

package/src/components/SpriteSizePicker/SpriteSizePicker.css.ts

@@ -0,0 +1,103 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Sprite size picker: preset row, a 1:1 stage showing the real pixel
+ * footprint with edge/corner drag handles, and the optional W/H fields.
+ */
+globalStyle('.zylem-size-picker', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.md,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-size-picker-presets', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-size-picker-presets .zylem-button', {
+  minWidth: '40px',
+  fontVariantNumeric: 'tabular-nums',
+});
+
+globalStyle('.zylem-size-picker-stage', {
+  boxSizing: 'border-box',
+  position: 'relative',
+  flex: 'none',
+  padding: '8px',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  overflow: 'hidden',
+});
+
+// Sized to the sprite at 1:1; the grid's own 1px border sits just outside.
+globalStyle('.zylem-size-picker-frame', {
+  position: 'relative',
+  boxSizing: 'content-box',
+});
+
+// Handles: slim glass bars along the right and bottom edges plus a corner
+// jewel. Hit areas straddle the edge so small sprites are still grabbable.
+globalStyle('.zylem-size-picker-handle', {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  borderRadius: '999px',
+  border: '1px solid rgba(178, 219, 255, 0.85)',
+  background:
+    'linear-gradient(180deg, rgba(240, 250, 255, 0.96), rgba(140, 190, 235, 0.92))',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 4px rgba(0,0,0,0.5), ${vars.effects.glowPrimary}`,
+  touchAction: 'none',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-size-picker-handle:hover, .zylem-size-picker-handle[data-dragging]', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 4px rgba(0,0,0,0.5), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-size-picker-handle[data-edge="right"]', {
+  top: '50%',
+  right: '-6px',
+  width: '8px',
+  height: 'min(28px, 60%)',
+  transform: 'translateY(-50%)',
+  cursor: 'ew-resize',
+});
+
+globalStyle('.zylem-size-picker-handle[data-edge="bottom"]', {
+  left: '50%',
+  bottom: '-6px',
+  width: 'min(28px, 60%)',
+  height: '8px',
+  transform: 'translateX(-50%)',
+  cursor: 'ns-resize',
+});
+
+globalStyle('.zylem-size-picker-handle[data-edge="corner"]', {
+  right: '-7px',
+  bottom: '-7px',
+  width: '14px',
+  height: '14px',
+  cursor: 'nwse-resize',
+});
+
+globalStyle('.zylem-size-picker-readout', {
+  position: 'absolute',
+  right: vars.spacing.sm,
+  bottom: vars.spacing.xs,
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.primary,
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-size-picker-fields', {
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: vars.spacing.md,
+});

package/src/components/SpriteSizePicker/SpriteSizePicker.tsx

@@ -0,0 +1,172 @@
+import { For, Show, onCleanup } from 'solid-js';
+import { Button } from '../Button/Button';
+import { NumberField } from '../NumberField/NumberField';
+import { PixelGrid } from '../PixelGrid/PixelGrid';
+import { SPRITE_SIZE_PRESETS, type SpriteSize, snapSize } from './snap-size';
+
+export interface SpriteSizePickerProps {
+  width: number;
+  height: number;
+  onChange: (size: SpriteSize) => void;
+  /** Square presets; each sets both dimensions. */
+  presets?: readonly number[];
+  /** Smallest dimension reachable by dragging or typing. */
+  min?: number;
+  /** Largest dimension; also sets the size of the 1:1 preview stage unless `stageSize` is given. */
+  max?: number;
+  /**
+   * Side of the square preview stage in pixels. Defaults to `max`, which is
+   * right when the limit is small; a picker allowing 1024px sprites sets this
+   * so the stage still fits a dialog. Sprites larger than the stage are shown
+   * cropped at 1:1 with the readout carrying the true size.
+   */
+  stageSize?: number;
+  /** Drag increment in source pixels. */
+  step?: number;
+  /** Render Width / Height number fields under the preview. */
+  showFields?: boolean;
+  class?: string;
+}
+
+type Edge = 'right' | 'bottom' | 'corner';
+
+/** Extra room around the stage so the largest size still shows its handles. */
+const STAGE_GUTTER = 24;
+
+/**
+ * Sprite canvas size chooser: power-of-two presets, a 1:1 preview of the
+ * actual pixel footprint with drag handles that grow it in `step` increments,
+ * and optional numeric fields for exact values.
+ */
+export function SpriteSizePicker(props: SpriteSizePickerProps) {
+  const min = () => props.min ?? 2;
+  const max = () => props.max ?? 256;
+  const step = () => props.step ?? 2;
+  const presets = () => props.presets ?? SPRITE_SIZE_PRESETS;
+  const snap = (value: number) => snapSize(value, { min: min(), max: max(), step: step() });
+
+  const emit = (width: number, height: number) => {
+    if (width !== props.width || height !== props.height) {
+      props.onChange({ width, height });
+    }
+  };
+
+  let release: (() => void) | undefined;
+  onCleanup(() => release?.());
+
+  const startDrag = (edge: Edge) => (event: PointerEvent) => {
+    if (event.button !== 0) return;
+    const handle = event.currentTarget as HTMLElement;
+    const originX = event.clientX;
+    const originY = event.clientY;
+    const startWidth = props.width;
+    const startHeight = props.height;
+    // Capture keeps the drag alive when the pointer outruns the handle; a
+    // synthetic event has no active pointer to capture, so tolerate that.
+    try {
+      handle.setPointerCapture(event.pointerId);
+    } catch {
+      /* no active pointer */
+    }
+    handle.dataset.dragging = '';
+
+    const onMove = (move: PointerEvent) => {
+      const dx = move.clientX - originX;
+      const dy = move.clientY - originY;
+      const width = edge === 'bottom' ? props.width : snap(startWidth + dx);
+      const height = edge === 'right' ? props.height : snap(startHeight + dy);
+      emit(width, height);
+    };
+    const onUp = () => release?.();
+    release = () => {
+      handle.removeEventListener('pointermove', onMove);
+      handle.removeEventListener('pointerup', onUp);
+      handle.removeEventListener('pointercancel', onUp);
+      delete handle.dataset.dragging;
+      if (handle.hasPointerCapture(event.pointerId)) {
+        handle.releasePointerCapture(event.pointerId);
+      }
+      release = undefined;
+    };
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', onUp);
+    handle.addEventListener('pointercancel', onUp);
+    event.preventDefault();
+  };
+
+  const stage = () => props.stageSize ?? max();
+  const stageSize = () => `${stage() + STAGE_GUTTER}px`;
+  // The frame is the sprite at 1:1, cropped to the stage when it outgrows it.
+  const frameWidth = () => Math.min(props.width, stage());
+  const frameHeight = () => Math.min(props.height, stage());
+
+  return (
+    <div class={props.class ? `zylem-size-picker ${props.class}` : 'zylem-size-picker'}>
+      <div class="zylem-size-picker-presets" role="group" aria-label="Size presets">
+        <For each={presets()}>
+          {(preset) => (
+            <Button
+              size="sm"
+              variant={props.width === preset && props.height === preset ? 'primary' : 'default'}
+              aria-pressed={props.width === preset && props.height === preset}
+              onClick={() => emit(preset, preset)}
+            >
+              {preset}
+            </Button>
+          )}
+        </For>
+      </div>
+
+      <div class="zylem-size-picker-stage" style={{ width: stageSize(), height: stageSize() }}>
+        <div
+          class="zylem-size-picker-frame"
+          style={{ width: `${frameWidth()}px`, height: `${frameHeight()}px` }}
+        >
+          <PixelGrid width={frameWidth()} height={frameHeight()} checkerCell={4} />
+          <div
+            class="zylem-size-picker-handle"
+            data-edge="right"
+            aria-hidden="true"
+            onPointerDown={startDrag('right')}
+          />
+          <div
+            class="zylem-size-picker-handle"
+            data-edge="bottom"
+            aria-hidden="true"
+            onPointerDown={startDrag('bottom')}
+          />
+          <div
+            class="zylem-size-picker-handle"
+            data-edge="corner"
+            aria-hidden="true"
+            onPointerDown={startDrag('corner')}
+          />
+        </div>
+        <output class="zylem-size-picker-readout" aria-live="polite">
+          {props.width} × {props.height} px
+        </output>
+      </div>
+
+      <Show when={props.showFields ?? true}>
+        <div class="zylem-size-picker-fields">
+          <NumberField
+            label="Width"
+            value={props.width}
+            minValue={min()}
+            maxValue={max()}
+            step={step()}
+            onChange={(width) => emit(snap(width), props.height)}
+          />
+          <NumberField
+            label="Height"
+            value={props.height}
+            minValue={min()}
+            maxValue={max()}
+            step={step()}
+            onChange={(height) => emit(props.width, snap(height))}
+          />
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/components/SpriteSizePicker/snap-size.ts

@@ -0,0 +1,28 @@
+export interface SnapOptions {
+  min: number;
+  max: number;
+  step: number;
+}
+
+/** Sprite dimensions in source pixels. */
+export interface SpriteSize {
+  width: number;
+  height: number;
+}
+
+/** Powers of two from 8 through 256; the default preset row. */
+export const SPRITE_SIZE_PRESETS: readonly number[] = [8, 16, 32, 64, 128, 256];
+
+/**
+ * Round a dragged dimension to the nearest step and keep it inside the
+ * allowed range. Non-finite input (a NaN from an empty field) lands on `min`.
+ */
+export function snapSize(value: number, options: SnapOptions): number {
+  const { min, max, step } = options;
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  const unit = step > 0 ? step : 1;
+  const snapped = Math.round(value / unit) * unit;
+  return Math.min(max, Math.max(min, snapped));
+}

package/src/components/Tabs/Tabs.css.ts

@@ -59,6 +59,54 @@ globalStyle('.zylem-tabs-trigger[data-disabled]', {
   cursor: 'not-allowed',
 });
 
+globalStyle('.zylem-tabs-trigger-label', {
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+// Unsaved marker: a small live dot.
+globalStyle('.zylem-tabs-dirty', {
+  flex: 'none',
+  width: '6px',
+  height: '6px',
+  borderRadius: '50%',
+  background: vars.colors.active,
+  boxShadow: vars.effects.glowActive,
+});
+
+// Close affordance: flat at rest, accent on hover (like the window close).
+globalStyle('.zylem-tabs-close', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 'none',
+  width: '16px',
+  height: '16px',
+  marginRight: `calc(${vars.spacing.xs} * -1)`,
+  borderRadius: '4px',
+  color: vars.colors.textSecondary,
+  cursor: 'pointer',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-tabs-close svg', {
+  width: '11px',
+  height: '11px',
+  stroke: 'currentColor',
+});
+
+globalStyle('.zylem-tabs-close:hover', {
+  background: vars.colors.accent,
+  color: '#FFF4F2',
+});
+
+globalStyle('.zylem-tabs-close:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-tabs-content', {
   flex: 1,
   minHeight: 0,

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,6 @@
 import { Tabs as KTabs } from '@kobalte/core';
+import X from 'lucide-solid/icons/x';
+import { Show } from 'solid-js';
 import type { JSX } from 'solid-js';
 
 export interface TabsProps {
@@ -38,12 +40,29 @@ export function TabsList(props: { children: JSX.Element; class?: string }) {
   );
 }
 
-export function TabsTrigger(props: {
+export interface TabsTriggerProps {
   value: string;
   children: JSX.Element;
   disabled?: boolean;
   class?: string;
-}) {
+  /**
+   * Document-style tabs: shows a close affordance after the label. It is a
+   * `role="button"` span (a button may not nest in the trigger button) and
+   * closing does not select the tab.
+   */
+  onClose?: () => void;
+  /** Accessible name of the close affordance; defaults to `Close tab`. */
+  closeLabel?: string;
+  /** Unsaved-changes marker before the close affordance. */
+  dirty?: boolean;
+}
+
+export function TabsTrigger(props: TabsTriggerProps) {
+  const close = (event: Event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    props.onClose?.();
+  };
   return (
     <KTabs.Trigger
       class={
@@ -52,7 +71,26 @@ export function TabsTrigger(props: {
       value={props.value}
       disabled={props.disabled}
     >
-      {props.children}
+      <span class="zylem-tabs-trigger-label">{props.children}</span>
+      <Show when={props.dirty}>
+        <span class="zylem-tabs-dirty" aria-label="Unsaved changes" title="Unsaved changes" />
+      </Show>
+      <Show when={props.onClose}>
+        <span
+          class="zylem-tabs-close"
+          role="button"
+          tabIndex={0}
+          aria-label={props.closeLabel ?? 'Close tab'}
+          title={props.closeLabel ?? 'Close tab'}
+          onClick={close}
+          onPointerDown={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') close(event);
+          }}
+        >
+          <X aria-hidden="true" />
+        </span>
+      </Show>
     </KTabs.Trigger>
   );
 }

package/src/components/TextField/TextField.tsx

@@ -1,5 +1,5 @@
 import { TextField as KTextField } from '@kobalte/core';
-import { Show, splitProps } from 'solid-js';
+import { createEffect, createSignal, on, Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
 
 export interface TextFieldProps {
@@ -7,8 +7,17 @@ export interface TextFieldProps {
   error?: string;
   placeholder?: string;
   value?: string;
+  /** Fires on every edit. */
   onChange?: (value: string) => void;
+  /**
+   * Fires on blur and, for single-line fields, on Enter. While set, the field
+   * edits a local draft and only reports it here, so a parent that normalises
+   * or rejects values (rename, comma lists, keys) does not fight the typing;
+   * the draft snaps back to `value` after each commit.
+   */
+  onCommit?: (value: string) => void;
   onInput?: JSX.EventHandlerUnion<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
+  onBlur?: JSX.EventHandlerUnion<HTMLInputElement | HTMLTextAreaElement, FocusEvent>;
   type?: string;
   name?: string;
   disabled?: boolean;
@@ -21,18 +30,51 @@ export interface TextFieldProps {
   onKeyDown?: JSX.EventHandlerUnion<HTMLInputElement | HTMLTextAreaElement, KeyboardEvent>;
 }
 
+function callHandler<T, E extends Event>(
+  handler: JSX.EventHandlerUnion<T, E> | undefined,
+  event: E & { currentTarget: T; target: Element },
+) {
+  if (!handler) return;
+  if (typeof handler === 'function') handler(event);
+  else handler[0](handler[1], event);
+}
+
 /**
  * HyperGlass text field: inset glass input with an uppercase HyperCard-style
  * label. Set `multiline` for a textarea.
  */
 export function TextField(props: TextFieldProps) {
   const [local] = splitProps(props, ['label', 'error', 'multiline', 'class']);
+  const [draft, setDraft] = createSignal(props.value ?? '');
+  createEffect(on(() => props.value, (value) => setDraft(value ?? '')));
+
+  const value = () => (props.onCommit ? draft() : props.value);
+  const change = (next: string) => {
+    setDraft(next);
+    props.onChange?.(next);
+  };
+  const commit = () => {
+    if (!props.onCommit) return;
+    props.onCommit(draft());
+    setDraft(props.value ?? '');
+  };
+
+  const blur = (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement; target: Element }) => {
+    callHandler(props.onBlur, event);
+    commit();
+  };
+  const keyDown = (
+    event: KeyboardEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement; target: Element },
+  ) => {
+    callHandler(props.onKeyDown, event);
+    if (event.key === 'Enter' && !local.multiline && !event.defaultPrevented) commit();
+  };
 
   return (
     <KTextField.Root
       class={local.class ? `zylem-field-root ${local.class}` : 'zylem-field-root'}
-      value={props.value}
-      onChange={props.onChange}
+      value={value()}
+      onChange={change}
       name={props.name}
       disabled={props.disabled}
       readOnly={props.readOnly}
@@ -53,7 +95,8 @@ export function TextField(props: TextFieldProps) {
             placeholder={props.placeholder}
             autofocus={props.autofocus}
             onInput={props.onInput as JSX.EventHandlerUnion<HTMLInputElement, InputEvent>}
-            onKeyDown={props.onKeyDown as JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>}
+            onBlur={blur}
+            onKeyDown={keyDown}
           />
         }
       >
@@ -63,7 +106,8 @@ export function TextField(props: TextFieldProps) {
           rows={props.rows}
           autofocus={props.autofocus}
           onInput={props.onInput as JSX.EventHandlerUnion<HTMLTextAreaElement, InputEvent>}
-          onKeyDown={props.onKeyDown as JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent>}
+          onBlur={blur}
+          onKeyDown={keyDown}
         />
       </Show>
       <Show when={local.error}>