@zylem/ui 0.8.8 → 0.8.11

package/src/components/Mixer/Mixer.css.ts

@@ -0,0 +1,246 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+// Knob -----------------------------------------------------------------------
+
+globalStyle('.zylem-knob', {
+  display: 'inline-flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '2px',
+  fontFamily: vars.typography.fontFamily,
+  color: vars.colors.text,
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-knob[data-disabled]', {
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-knob-dial', {
+  display: 'block',
+  borderRadius: '999px',
+  cursor: 'ns-resize',
+  outline: 'none',
+  touchAction: 'none',
+});
+
+globalStyle('.zylem-knob[data-dragging] .zylem-knob-dial', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-knob-dial:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-knob-dial svg', {
+  display: 'block',
+  overflow: 'visible',
+});
+
+globalStyle('.zylem-knob-track', {
+  fill: 'none',
+  stroke: 'rgba(8, 19, 31, 0.9)',
+  strokeWidth: 3,
+  strokeLinecap: 'round',
+});
+
+globalStyle('.zylem-knob-fill', {
+  fill: 'none',
+  stroke: 'rgba(120, 190, 255, 0.95)',
+  strokeWidth: 3,
+  strokeLinecap: 'round',
+  filter: 'drop-shadow(0 0 3px rgba(97, 166, 232, 0.7))',
+});
+
+globalStyle('.zylem-knob-cap', {
+  fill: 'rgba(40, 70, 105, 1)',
+  stroke: 'rgba(178, 219, 255, 0.5)',
+  strokeWidth: 1,
+});
+
+globalStyle('.zylem-knob-pointer', {
+  stroke: 'rgba(240, 250, 255, 0.98)',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+});
+
+globalStyle('.zylem-knob-label', {
+  fontSize: '9px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-knob-value', {
+  fontSize: '10px',
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.text,
+});
+
+// Mixer strip ----------------------------------------------------------------
+
+globalStyle('.zylem-mixer-strip', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+  width: '64px',
+  padding: `${vars.spacing.sm} ${vars.spacing.xs}`,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.colors.text,
+  background: vars.material.glassPanelDark,
+  border: '1px solid rgba(97, 166, 232, 0.2)',
+  borderTop: '3px solid var(--zylem-track-color)',
+  borderRadius: vars.radii.control,
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06)',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-mixer-strip[data-master]', {
+  width: '76px',
+  background: vars.material.glassPanel,
+});
+
+globalStyle('.zylem-mixer-strip[data-selected]', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(178, 219, 255, 0.6), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-mixer-strip[data-disabled]', {
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-mixer-fader-row', {
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: '4px',
+  height: '132px',
+});
+
+globalStyle('.zylem-fader', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '24px',
+  height: '100%',
+  touchAction: 'none',
+});
+
+globalStyle('.zylem-fader[data-disabled]', {
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-fader-sr', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
+globalStyle('.zylem-fader-track', {
+  position: 'relative',
+  flex: '1 1 auto',
+  width: '8px',
+  margin: '0 auto',
+  borderRadius: '999px',
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  cursor: 'pointer',
+});
+
+globalStyle('.zylem-fader-fill', {
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  borderRadius: '999px',
+  background:
+    'linear-gradient(0deg, rgba(48, 137, 220, 0.8), rgba(178, 219, 255, 0.55))',
+});
+
+globalStyle('.zylem-fader-zero', {
+  position: 'absolute',
+  left: '-6px',
+  right: '-6px',
+  bottom: 'calc(100% * 60 / 66)',
+  height: '1px',
+  background: 'rgba(205, 232, 255, 0.4)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-fader-thumb', {
+  display: 'block',
+  left: '-7px',
+  width: '22px',
+  height: '12px',
+  borderRadius: '4px',
+  border: '1px solid rgba(255,255,255,0.55)',
+  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), inset 0 -3px 0 rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.5)`,
+  cursor: 'grab',
+  outline: 'none',
+});
+
+globalStyle('.zylem-fader-thumb:active', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-fader-thumb:focus-visible', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-mixer-meter', {
+  position: 'relative',
+  width: '6px',
+  borderRadius: '3px',
+  background: 'rgba(8, 19, 31, 0.9)',
+  border: '1px solid rgba(97, 166, 232, 0.2)',
+  overflow: 'hidden',
+});
+
+globalStyle('.zylem-mixer-meter-fill', {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  background:
+    'linear-gradient(0deg, rgba(28, 174, 63, 0.95) 0%, rgba(170, 255, 190, 0.95) 65%, rgba(255, 220, 130, 0.95) 85%, rgba(230, 69, 52, 0.95) 100%)',
+  transition: `height 60ms linear`,
+});
+
+globalStyle('.zylem-mixer-readout', {
+  fontSize: '10px',
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.textSecondary,
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-mixer-toggles', {
+  display: 'flex',
+  gap: '3px',
+});
+
+globalStyle('.zylem-mixer-name', {
+  maxWidth: '100%',
+  fontSize: '11px',
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+globalStyle('.zylem-mixer-strip[data-muted] .zylem-mixer-name', {
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-mixer-strip[data-master] .zylem-mixer-name', {
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+});

package/src/components/Mixer/MixerStrip.tsx

@@ -0,0 +1,150 @@
+import { Slider as KSlider } from '@kobalte/core';
+import { Show } from 'solid-js';
+import { clamp } from '../TimelineLanes/lanes-math';
+import { Knob } from './Knob';
+
+export interface MixerStripProps {
+  name: string;
+  color?: string;
+  /** Fader position in dB. */
+  volume: number;
+  onVolumeChange?: (volume: number) => void;
+  onVolumeCommit?: (volume: number) => void;
+  minVolume?: number;
+  maxVolume?: number;
+  /** -1 (left) … 1 (right). Omit to hide the pan knob. */
+  pan?: number;
+  onPanChange?: (pan: number) => void;
+  onPanCommit?: (pan: number) => void;
+  /** Mute / solo render only when their handler is given. */
+  muted?: boolean;
+  onToggleMute?: () => void;
+  solo?: boolean;
+  onToggleSolo?: () => void;
+  /** Live output level, 0–1, drawn as a meter beside the fader. */
+  level?: number;
+  /** Wider strip with a stronger label; for the master bus. */
+  master?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+  disabled?: boolean;
+  class?: string;
+}
+
+/** `-60` (the floor) reads as `-inf`; otherwise one decimal with a sign. */
+export function formatDb(value: number, floor = -60): string {
+  if (!Number.isFinite(value) || value <= floor) return '-inf';
+  const rounded = Math.round(value * 10) / 10;
+  return `${rounded > 0 ? '+' : ''}${rounded.toFixed(1)} dB`;
+}
+
+/** `-1` → `L100`, `0` → `C`, `0.5` → `R50`. */
+export function formatPan(value: number): string {
+  const percent = Math.round(Math.abs(value) * 100);
+  if (percent === 0) return 'C';
+  return `${value < 0 ? 'L' : 'R'}${percent}`;
+}
+
+/**
+ * Channel strip: pan knob, vertical fader with a level meter, mute/solo, and
+ * the track name with its color. Compose several into a mixer row.
+ */
+export function MixerStrip(props: MixerStripProps) {
+  const min = () => props.minVolume ?? -60;
+  const max = () => props.maxVolume ?? 6;
+
+  return (
+    <div
+      class={props.class ? `zylem-mixer-strip ${props.class}` : 'zylem-mixer-strip'}
+      style={{ '--zylem-track-color': props.color ?? 'var(--zylem-color-primary)' }}
+      data-master={props.master ? '' : undefined}
+      data-selected={props.selected ? '' : undefined}
+      data-disabled={props.disabled ? '' : undefined}
+      data-muted={props.muted ? '' : undefined}
+      onPointerDown={() => props.onSelect?.()}
+    >
+      <Show when={props.pan !== undefined}>
+        <Knob
+          value={props.pan ?? 0}
+          min={-1}
+          max={1}
+          step={0.01}
+          defaultValue={0}
+          bipolar
+          size={30}
+          label="Pan"
+          format={formatPan}
+          disabled={props.disabled}
+          onChange={(value) => props.onPanChange?.(value)}
+          onCommit={(value) => props.onPanCommit?.(value)}
+          class="zylem-mixer-pan"
+        />
+      </Show>
+      <div class="zylem-mixer-fader-row">
+        <KSlider.Root
+          class="zylem-fader"
+          orientation="vertical"
+          value={[clamp(props.volume, min(), max())]}
+          minValue={min()}
+          maxValue={max()}
+          step={0.1}
+          disabled={props.disabled}
+          onChange={(values) => props.onVolumeChange?.(values[0] ?? min())}
+          onChangeEnd={(values) => props.onVolumeCommit?.(values[0] ?? min())}
+          getValueLabel={(params) => formatDb(params.values[0] ?? min(), min())}
+        >
+          <KSlider.Label class="zylem-fader-sr">{`${props.name} volume`}</KSlider.Label>
+          <KSlider.Track class="zylem-fader-track">
+            <KSlider.Fill class="zylem-fader-fill" />
+            <span class="zylem-fader-zero" aria-hidden="true" />
+            <KSlider.Thumb class="zylem-fader-thumb">
+              <KSlider.Input class="zylem-fader-sr" />
+            </KSlider.Thumb>
+          </KSlider.Track>
+        </KSlider.Root>
+        <div class="zylem-mixer-meter" aria-hidden="true">
+          <div
+            class="zylem-mixer-meter-fill"
+            style={{ height: `${Math.round(clamp(props.level ?? 0, 0, 1) * 100)}%` }}
+          />
+        </div>
+      </div>
+      <span class="zylem-mixer-readout">{formatDb(props.volume, min())}</span>
+      <div class="zylem-mixer-toggles">
+        <Show when={props.onToggleMute}>
+          <button
+            type="button"
+            class="zylem-track-toggle"
+            data-kind="mute"
+            aria-pressed={props.muted ? 'true' : 'false'}
+            aria-label={props.muted ? 'Unmute' : 'Mute'}
+            title={props.muted ? 'Unmute' : 'Mute'}
+            disabled={props.disabled}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => props.onToggleMute?.()}
+          >
+            M
+          </button>
+        </Show>
+        <Show when={props.onToggleSolo}>
+          <button
+            type="button"
+            class="zylem-track-toggle"
+            data-kind="solo"
+            aria-pressed={props.solo ? 'true' : 'false'}
+            aria-label={props.solo ? 'Unsolo' : 'Solo'}
+            title={props.solo ? 'Unsolo' : 'Solo'}
+            disabled={props.disabled}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => props.onToggleSolo?.()}
+          >
+            S
+          </button>
+        </Show>
+      </div>
+      <span class="zylem-mixer-name" title={props.name}>
+        {props.name}
+      </span>
+    </div>
+  );
+}

package/src/components/NumberField/NumberField.tsx

@@ -23,8 +23,12 @@ export function NumberField(props: NumberFieldProps) {
     <KNumberField.Root
       class={props.class ? `zylem-field-root ${props.class}` : 'zylem-field-root'}
       rawValue={props.value}
+      // Kobalte reports the parsed value on mount and after each format pass;
+      // only real edits reach the owner, so a controlled form is not marked
+      // dirty just by rendering.
       onRawValueChange={(value) => {
-        if (props.onChange && !Number.isNaN(value)) props.onChange(value);
+        if (!props.onChange || Number.isNaN(value) || value === props.value) return;
+        props.onChange(value);
       }}
       minValue={props.minValue}
       maxValue={props.maxValue}

package/src/components/Panel/Panel.tsx

@@ -16,6 +16,8 @@ export interface PanelProps
    * inside an already-outlined region.
    */
   borderless?: boolean;
+  /** Class for the body element, for layouts the body's children need (a form's column, a grid). */
+  bodyClass?: string;
   children?: JSX.Element;
 }
 
@@ -30,6 +32,7 @@ export function Panel(props: PanelProps) {
     'window',
     'flush',
     'borderless',
+    'bodyClass',
     'children',
     'class',
   ]);
@@ -53,11 +56,9 @@ export function Panel(props: PanelProps) {
         </div>
       </Show>
       <div
-        class={
-          local.flush
-            ? 'zylem-panel-body zylem-panel-body--flush'
-            : 'zylem-panel-body'
-        }
+        class={['zylem-panel-body', local.flush ? 'zylem-panel-body--flush' : '', local.bodyClass ?? '']
+          .filter(Boolean)
+          .join(' ')}
       >
         {local.children}
       </div>

package/src/components/PianoRoll/PianoRoll.css.ts

@@ -0,0 +1,224 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-piano-roll', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+  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,
+  outline: 'none',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-piano-roll:focus-visible', {
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-piano-roll[data-disabled]', {
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-piano-roll-scroll', {
+  flex: '1 1 auto',
+  minHeight: 0,
+  overflow: 'auto',
+});
+
+globalStyle('.zylem-piano-roll-content', {
+  position: 'relative',
+  display: 'flex',
+});
+
+// Keys: sticky column of white/black rows, labelled at each C.
+globalStyle('.zylem-piano-roll-keys', {
+  position: 'sticky',
+  left: 0,
+  zIndex: 2,
+  flex: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  borderRight: '1px solid rgba(97, 166, 232, 0.3)',
+  boxShadow: '2px 0 6px rgba(0,0,0,0.35)',
+});
+
+globalStyle('.zylem-piano-roll-key', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  padding: '0 4px 0 0',
+  margin: 0,
+  border: 0,
+  borderBottom: '1px solid rgba(0,0,0,0.35)',
+  fontFamily: vars.typography.fontFamily,
+  fontSize: '9px',
+  lineHeight: 1,
+  color: '#1c2633',
+  background: 'linear-gradient(90deg, #dbe6f2, #f4f8fc)',
+  cursor: 'pointer',
+  outline: 'none',
+});
+
+globalStyle('.zylem-piano-roll-key[data-black]', {
+  color: '#cdd8e6',
+  background: 'linear-gradient(90deg, #0d151f, #263241)',
+  boxShadow: 'inset -6px 0 0 rgba(255,255,255,0.05)',
+});
+
+globalStyle('.zylem-piano-roll-key[data-c]', {
+  fontWeight: 700,
+});
+
+globalStyle('.zylem-piano-roll-key:hover:not(:disabled)', {
+  filter: 'brightness(1.1)',
+});
+
+globalStyle('.zylem-piano-roll-key:active:not(:disabled)', {
+  filter: 'brightness(0.92)',
+});
+
+// Grid: row stripes plus beat/bar/snap columns from gradients.
+globalStyle('.zylem-piano-roll-grid', {
+  position: 'relative',
+  flex: 'none',
+  backgroundImage: [
+    'repeating-linear-gradient(90deg, rgba(205, 232, 255, 0.28) 0 1px, transparent 1px var(--zylem-pr-bar))',
+    'repeating-linear-gradient(90deg, rgba(205, 232, 255, 0.12) 0 1px, transparent 1px var(--zylem-pr-ppb))',
+    'repeating-linear-gradient(90deg, rgba(205, 232, 255, 0.05) 0 1px, transparent 1px var(--zylem-pr-snap))',
+  ].join(', '),
+});
+
+globalStyle('.zylem-piano-roll-row', {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  boxSizing: 'border-box',
+  borderBottom: '1px solid rgba(255,255,255,0.04)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-piano-roll-row[data-black]', {
+  background: 'rgba(0, 0, 0, 0.22)',
+});
+
+globalStyle('.zylem-piano-roll-row[data-c]', {
+  borderBottom: '1px solid rgba(205, 232, 255, 0.25)',
+});
+
+globalStyle('.zylem-piano-roll-end', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  background: 'rgba(0, 0, 0, 0.35)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-piano-roll-note', {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '3px',
+  border: '1px solid rgba(255, 255, 255, 0.55)',
+  background:
+    'linear-gradient(180deg, rgba(178, 219, 255, 0.98), rgba(48, 137, 220, 0.98))',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.5)',
+  opacity: 'calc(0.45 + 0.55 * var(--zylem-pr-velocity, 0.8))',
+  color: '#08131f',
+  cursor: 'grab',
+  outline: 'none',
+  overflow: 'hidden',
+});
+
+globalStyle('.zylem-piano-roll-note[data-selected]', {
+  background:
+    'linear-gradient(180deg, rgba(255, 244, 200, 0.98), rgba(240, 180, 60, 0.98))',
+  borderColor: 'white',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6), 0 0 8px rgba(240, 180, 60, 0.7)',
+  opacity: 1,
+});
+
+globalStyle('.zylem-piano-roll[data-dragging] .zylem-piano-roll-note', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-piano-roll-note-label', {
+  padding: '0 4px',
+  fontSize: '9px',
+  fontWeight: 700,
+  lineHeight: 1,
+  whiteSpace: 'nowrap',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-piano-roll-note-handle', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  width: '6px',
+  cursor: 'ew-resize',
+});
+
+globalStyle('.zylem-piano-roll-playhead', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: '1px',
+  background: 'rgba(255, 236, 170, 0.9)',
+  boxShadow: '0 0 6px rgba(240, 180, 60, 0.7)',
+  pointerEvents: 'none',
+});
+
+// Velocity lane under the grid: one bar per note, drag vertically.
+globalStyle('.zylem-piano-roll-velocity', {
+  display: 'flex',
+  flex: 'none',
+  borderTop: '1px solid rgba(97, 166, 232, 0.3)',
+  background: 'rgba(8, 19, 31, 0.6)',
+});
+
+globalStyle('.zylem-piano-roll-velocity-label', {
+  position: 'sticky',
+  left: 0,
+  zIndex: 2,
+  flex: 'none',
+  display: 'flex',
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+  padding: '0 4px 4px 0',
+  fontSize: '9px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  background: 'rgba(12, 22, 34, 0.98)',
+  borderRight: '1px solid rgba(97, 166, 232, 0.3)',
+});
+
+globalStyle('.zylem-piano-roll-velocity-lane', {
+  position: 'relative',
+  flex: 'none',
+  height: '100%',
+});
+
+globalStyle('.zylem-piano-roll-velocity-bar', {
+  position: 'absolute',
+  bottom: 0,
+  width: '5px',
+  marginLeft: '1px',
+  borderRadius: '2px 2px 0 0',
+  background: 'linear-gradient(180deg, rgba(178, 219, 255, 0.95), rgba(48, 137, 220, 0.85))',
+  cursor: 'ns-resize',
+});
+
+globalStyle('.zylem-piano-roll-velocity-bar[data-selected]', {
+  background: 'linear-gradient(180deg, rgba(255, 244, 200, 0.98), rgba(240, 180, 60, 0.95))',
+});