@zylem/ui 0.8.9 → 0.8.11

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}>

package/src/components/TimelineLanes/TimelineLanes.css.ts

@@ -0,0 +1,365 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+const RULER_HEIGHT = '26px';
+const LANE_BORDER = '1px solid rgba(97, 166, 232, 0.16)';
+
+globalStyle('.zylem-lanes', {
+  position: 'relative',
+  overflow: 'auto',
+  minHeight: 0,
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  color: vars.colors.text,
+  background: vars.material.fieldGlass,
+  border: '1px solid rgba(97, 166, 232, 0.22)',
+  borderRadius: vars.radii.control,
+  boxShadow: vars.effects.shadowInset,
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-lanes[data-disabled]', {
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-lanes-content', {
+  position: 'relative',
+  minWidth: '100%',
+  minHeight: '100%',
+});
+
+// Ruler row: sticky to the top of the scroller, above the lanes and playhead.
+globalStyle('.zylem-lanes-ruler-row', {
+  position: 'sticky',
+  top: 0,
+  zIndex: 3,
+  display: 'flex',
+  height: RULER_HEIGHT,
+  background: vars.material.panelHeaderGloss,
+  backgroundColor: 'rgba(14, 30, 48, 0.96)',
+  borderBottom: '1px solid rgba(97, 166, 232, 0.3)',
+  boxShadow: '0 1px 0 rgba(255,255,255,0.06) inset',
+});
+
+globalStyle('.zylem-lanes-corner', {
+  position: 'sticky',
+  left: 0,
+  zIndex: 4,
+  flex: 'none',
+  width: 'var(--zylem-lanes-header)',
+  display: 'flex',
+  alignItems: 'center',
+  padding: `0 ${vars.spacing.sm}`,
+  fontSize: '10px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  background: 'rgba(14, 30, 48, 0.98)',
+  borderRight: LANE_BORDER,
+});
+
+globalStyle('.zylem-lanes-ruler', {
+  position: 'relative',
+  flex: 'none',
+  height: '100%',
+  cursor: 'pointer',
+});
+
+globalStyle('.zylem-lanes-range', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  background: 'rgba(240, 180, 60, 0.18)',
+  borderLeft: '1px solid rgba(240, 180, 60, 0.7)',
+  borderRight: '1px solid rgba(240, 180, 60, 0.7)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-lanes-tick', {
+  position: 'absolute',
+  bottom: 0,
+  width: '1px',
+  height: '6px',
+  background: 'rgba(205, 232, 255, 0.35)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-lanes-tick[data-major]', {
+  height: '10px',
+  background: 'rgba(205, 232, 255, 0.7)',
+});
+
+globalStyle('.zylem-lanes-tick-label', {
+  position: 'absolute',
+  left: '4px',
+  bottom: '8px',
+  fontSize: '10px',
+  fontVariantNumeric: 'tabular-nums',
+  whiteSpace: 'nowrap',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-lanes-playhead-head', {
+  position: 'absolute',
+  bottom: 0,
+  width: 0,
+  height: 0,
+  marginLeft: '-6px',
+  borderLeft: '6px solid transparent',
+  borderRight: '6px solid transparent',
+  borderTop: '8px solid rgba(255, 244, 200, 0.98)',
+  filter: 'drop-shadow(0 0 3px rgba(240, 180, 60, 0.8))',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-lanes-playhead', {
+  position: 'absolute',
+  top: RULER_HEIGHT,
+  bottom: 0,
+  zIndex: 1,
+  width: '1px',
+  marginLeft: '-0.5px',
+  background: 'rgba(255, 236, 170, 0.9)',
+  boxShadow: '0 0 6px rgba(240, 180, 60, 0.7)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-lanes-rows', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+// Lanes: sticky header cell + a body that carries the beat/second grid.
+globalStyle('.zylem-lane', {
+  display: 'flex',
+  flex: 'none',
+  borderBottom: LANE_BORDER,
+});
+
+globalStyle('.zylem-lane[data-selected]', {
+  background: 'rgba(97, 166, 232, 0.07)',
+});
+
+globalStyle('.zylem-lane-header', {
+  position: 'sticky',
+  left: 0,
+  zIndex: 2,
+  flex: 'none',
+  width: 'var(--zylem-lanes-header)',
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'stretch',
+  background: 'rgba(16, 27, 42, 0.96)',
+  borderRight: LANE_BORDER,
+});
+
+globalStyle('.zylem-lane[data-selected] > .zylem-lane-header', {
+  background: 'rgba(30, 54, 82, 0.96)',
+});
+
+globalStyle('.zylem-lane-body', {
+  position: 'relative',
+  flex: 'none',
+  height: '100%',
+  backgroundImage: [
+    'repeating-linear-gradient(90deg, rgba(205, 232, 255, 0.16) 0 1px, transparent 1px var(--zylem-lanes-major))',
+    'repeating-linear-gradient(90deg, rgba(205, 232, 255, 0.06) 0 1px, transparent 1px var(--zylem-lanes-minor))',
+  ].join(', '),
+});
+
+globalStyle('.zylem-lane[data-dimmed] > .zylem-lane-body', {
+  opacity: 0.45,
+});
+
+globalStyle('.zylem-lane--group', {
+  background: 'rgba(97, 166, 232, 0.08)',
+});
+
+globalStyle('.zylem-lane--group > .zylem-lane-header', {
+  fontSize: '10px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-lane--group > .zylem-lane-body', {
+  backgroundImage: 'none',
+});
+
+globalStyle('.zylem-lane-end', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  background: 'rgba(0, 0, 0, 0.28)',
+  pointerEvents: 'none',
+});
+
+// Clips: color-tinted glass blocks with edge handles.
+globalStyle('.zylem-clip', {
+  position: 'absolute',
+  top: '4px',
+  bottom: '4px',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  borderRadius: '5px',
+  border: '1px solid color-mix(in srgb, var(--zylem-clip-color) 70%, white 30%)',
+  background:
+    'linear-gradient(180deg, color-mix(in srgb, var(--zylem-clip-color) 70%, white 30%) 0%, color-mix(in srgb, var(--zylem-clip-color) 75%, black 25%) 100%)',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.45)',
+  color: '#0b1522',
+  cursor: 'grab',
+  outline: 'none',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-clip:hover:not([data-disabled])', {
+  filter: 'brightness(1.08)',
+});
+
+globalStyle('.zylem-clip[data-selected]', {
+  borderColor: 'rgba(255, 255, 255, 0.9)',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 1px rgba(255,255,255,0.5), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-clip:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-clip[data-dragging]', {
+  cursor: 'grabbing',
+  filter: 'brightness(1.12)',
+});
+
+globalStyle('.zylem-clip[data-disabled]', {
+  cursor: 'default',
+  opacity: 0.7,
+});
+
+globalStyle('.zylem-clip-label', {
+  flex: 'none',
+  padding: '2px 6px 0',
+  fontSize: '11px',
+  fontWeight: 600,
+  lineHeight: '14px',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  textShadow: '0 1px 0 rgba(255,255,255,0.25)',
+});
+
+globalStyle('.zylem-clip-body', {
+  position: 'relative',
+  flex: '1 1 auto',
+  minHeight: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-clip-blend', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  background:
+    'repeating-linear-gradient(135deg, rgba(0,0,0,0.28) 0 3px, transparent 3px 7px)',
+  borderRight: '1px dashed rgba(0,0,0,0.45)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-clip-handle', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: '7px',
+  cursor: 'ew-resize',
+});
+
+globalStyle('.zylem-clip-handle[data-edge="start"]', { left: 0 });
+globalStyle('.zylem-clip-handle[data-edge="end"]', { right: 0 });
+
+globalStyle('.zylem-clip-handle:hover', {
+  background: 'rgba(255,255,255,0.28)',
+});
+
+// Markers: diamonds (keyframes) and pins (events) centred on a time.
+globalStyle('.zylem-marker', {
+  position: 'absolute',
+  top: '50%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  padding: 0,
+  margin: 0,
+  border: 0,
+  background: 'transparent',
+  color: vars.colors.text,
+  cursor: 'grab',
+  transform: 'translate(-50%, -50%)',
+  outline: 'none',
+});
+
+globalStyle('.zylem-marker[data-shape="pin"]', {
+  transform: 'translate(-7px, -50%)',
+});
+
+globalStyle('.zylem-marker:disabled', {
+  cursor: 'default',
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-marker[data-dragging]', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-marker-glyph', {
+  display: 'block',
+  width: '11px',
+  height: '11px',
+  boxSizing: 'border-box',
+  border: '1px solid rgba(255, 255, 255, 0.7)',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.55)',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-marker[data-shape="diamond"] .zylem-marker-glyph', {
+  borderRadius: '2px',
+  background:
+    'var(--zylem-marker-color, linear-gradient(135deg, rgba(255, 244, 200, 0.98), rgba(240, 180, 60, 0.95)))',
+  transform: 'rotate(45deg)',
+});
+
+globalStyle('.zylem-marker[data-shape="pin"] .zylem-marker-glyph', {
+  width: '13px',
+  height: '13px',
+  borderRadius: '999px 999px 999px 2px',
+  background:
+    'var(--zylem-marker-color, linear-gradient(135deg, rgba(178, 219, 255, 0.98), rgba(48, 137, 220, 0.95)))',
+  transform: 'rotate(-45deg)',
+});
+
+globalStyle('.zylem-marker:hover:not(:disabled) .zylem-marker-glyph', {
+  filter: 'brightness(1.12)',
+});
+
+globalStyle('.zylem-marker[data-selected] .zylem-marker-glyph', {
+  borderColor: 'white',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.55), 0 0 10px rgba(255, 255, 255, 0.7)',
+});
+
+globalStyle('.zylem-marker:focus-visible .zylem-marker-glyph', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-marker-label', {
+  fontSize: '10px',
+  whiteSpace: 'nowrap',
+  color: vars.colors.text,
+  textShadow: '0 1px 1px rgba(0,0,0,0.7)',
+  maxWidth: '120px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});