@zylem/ui 0.9.6 → 0.9.8

package/src/components/index.ts

@@ -70,6 +70,7 @@ export { Separator, type SeparatorProps } from './Separator/Separator';
 // Composites
 export {
   WindowControls,
+  type DockOption,
   type DockPosition,
   type WindowControlsProps,
 } from './WindowControls/WindowControls';
@@ -144,6 +145,7 @@ export {
   ART_TOOL_ICONS,
   ART_TOOL_LABELS,
   type ArtTool,
+  type IconComponent,
   type ToolButtonProps,
 } from './ToolButton/ToolButton';
 export { AddTile, type AddTileProps, type AddTileVariant } from './AddTile/AddTile';
@@ -208,6 +210,8 @@ export {
   majorTickTimes,
   formatClock,
   formatBeats,
+  type ResolveClipDragOptions,
+  type RulerTickOptions,
 } from './TimelineLanes/lanes-math';
 export { TrackHeader, type TrackHeaderProps } from './TrackHeader/TrackHeader';
 export { PianoRoll, type PianoRollProps, type PianoRollNote } from './PianoRoll/PianoRoll';
@@ -216,6 +220,7 @@ export {
   isBlackKey,
   resolveNoteDrag,
   cellStart,
+  type NoteDragOptions,
 } from './PianoRoll/piano-roll-math';
 export { Knob, arcPath, type KnobProps } from './Mixer/Knob';
 export { MixerStrip, formatDb, formatPan, type MixerStripProps } from './Mixer/MixerStrip';
@@ -231,12 +236,21 @@ export {
 // Camera icons (Lucide-shaped originals; also `@zylem/ui/icons`)
 export {
   CAMERA_ICONS,
+  CAMERA_VIEWS,
   FreePerspective,
   GameCamera,
   IsometricPerspective,
   Perspective,
   SideviewPerspective,
   TopDownPerspective,
+  ViewBottom,
+  ViewIsoLeftBottom,
+  ViewIsoLeftTop,
+  ViewIsoRightBottom,
+  ViewIsoRightTop,
+  ViewLeft,
+  ViewRight,
+  ViewTop,
   Dock,
   cameraIconNodes,
   createZylemIcon,

package/src/icons/icon-nodes.ts

@@ -73,6 +73,34 @@ export const DockNode: IconNode = [
   ],
 ];
 
+/**
+ * One side-view camera — body on the left, lens pointing right, subject plane
+ * on the right — turned about the icon center. Positive degrees are clockwise,
+ * which is what puts the camera on that side of the subject:
+ * 0 left, 45 iso left/top, 90 top, 135 iso right/top, 180 right,
+ * 225 iso right/bottom, 270 bottom, 315 iso left/bottom.
+ */
+const FACING_RIGHT: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'M16 6h4v12h-4' }],
+];
+
+function turnCamera(angle: number): IconNode {
+  if (angle === 0) return FACING_RIGHT;
+  const transform = `rotate(${angle} 12 12)`;
+  return FACING_RIGHT.map(([element, attrs]) => [element, { ...attrs, transform }]) as IconNode;
+}
+
+export const ViewLeftNode = turnCamera(0);
+export const ViewIsoLeftTopNode = turnCamera(45);
+export const ViewTopNode = turnCamera(90);
+export const ViewIsoRightTopNode = turnCamera(135);
+export const ViewRightNode = turnCamera(180);
+export const ViewIsoRightBottomNode = turnCamera(225);
+export const ViewBottomNode = turnCamera(270);
+export const ViewIsoLeftBottomNode = turnCamera(315);
+
 export const cameraIconNodes = {
   perspective: PerspectiveNode,
   'sideview-perspective': SideviewPerspectiveNode,
@@ -80,6 +108,14 @@ export const cameraIconNodes = {
   'isometric-perspective': IsometricPerspectiveNode,
   'free-perspective': FreePerspectiveNode,
   'game-camera': GameCameraNode,
+  'view-left': ViewLeftNode,
+  'view-iso-left-top': ViewIsoLeftTopNode,
+  'view-top': ViewTopNode,
+  'view-iso-right-top': ViewIsoRightTopNode,
+  'view-right': ViewRightNode,
+  'view-iso-right-bottom': ViewIsoRightBottomNode,
+  'view-bottom': ViewBottomNode,
+  'view-iso-left-bottom': ViewIsoLeftBottomNode,
 } as const;
 
 export type CameraIconName = keyof typeof cameraIconNodes;

package/src/icons/index.ts

@@ -8,6 +8,14 @@ import {
   PerspectiveNode,
   SideviewPerspectiveNode,
   TopDownPerspectiveNode,
+  ViewBottomNode,
+  ViewIsoLeftBottomNode,
+  ViewIsoLeftTopNode,
+  ViewIsoRightBottomNode,
+  ViewIsoRightTopNode,
+  ViewLeftNode,
+  ViewRightNode,
+  ViewTopNode,
 } from './icon-nodes';
 
 export type { IconNode, CameraIconName } from './icon-nodes';
@@ -19,6 +27,14 @@ export {
   PerspectiveNode,
   SideviewPerspectiveNode,
   TopDownPerspectiveNode,
+  ViewBottomNode,
+  ViewIsoLeftBottomNode,
+  ViewIsoLeftTopNode,
+  ViewIsoRightBottomNode,
+  ViewIsoRightTopNode,
+  ViewLeftNode,
+  ViewRightNode,
+  ViewTopNode,
 } from './icon-nodes';
 export { createZylemIcon, type ZylemIconOptions, type ZylemIconProps } from './create-icon';
 
@@ -45,6 +61,23 @@ export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiv
 /** Recorder with controller buttons (game camera). */
 export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
 
+/** Side camera on the left, looking right. */
+export const ViewLeft = createZylemIcon('ViewLeft', ViewLeftNode);
+/** Side camera on the right, looking left. */
+export const ViewRight = createZylemIcon('ViewRight', ViewRightNode);
+/** Camera above the subject, looking down. */
+export const ViewTop = createZylemIcon('ViewTop', ViewTopNode);
+/** Camera below the subject, looking up. */
+export const ViewBottom = createZylemIcon('ViewBottom', ViewBottomNode);
+/** Camera at the upper left, the iso left/top angle. */
+export const ViewIsoLeftTop = createZylemIcon('ViewIsoLeftTop', ViewIsoLeftTopNode);
+/** Camera at the upper right, the iso right/top angle. */
+export const ViewIsoRightTop = createZylemIcon('ViewIsoRightTop', ViewIsoRightTopNode);
+/** Camera at the lower right, the iso right/bottom angle. */
+export const ViewIsoRightBottom = createZylemIcon('ViewIsoRightBottom', ViewIsoRightBottomNode);
+/** Camera at the lower left, the iso left/bottom angle. */
+export const ViewIsoLeftBottom = createZylemIcon('ViewIsoLeftBottom', ViewIsoLeftBottomNode);
+
 /** Filled window frame. Skips the 18px toolbar metric so `size` matches a chevron. */
 export const Dock = createZylemIcon('Dock', DockNode, {
   className: 'zylem-dock',
@@ -60,3 +93,18 @@ export const CAMERA_ICONS = [
   { name: 'free-perspective', label: 'Free / orbit', Icon: FreePerspective },
   { name: 'game-camera', label: 'Game camera', Icon: GameCamera },
 ] as const;
+
+/**
+ * The eight angles around the view cube, clockwise from the top-left corner.
+ * Free, game, and perspective already live on `CAMERA_ICONS`.
+ */
+export const CAMERA_VIEWS = [
+  { name: 'view-iso-left-top', label: 'Iso left/top', Icon: ViewIsoLeftTop },
+  { name: 'view-top', label: 'Top', Icon: ViewTop },
+  { name: 'view-iso-right-top', label: 'Iso right/top', Icon: ViewIsoRightTop },
+  { name: 'view-right', label: 'Right', Icon: ViewRight },
+  { name: 'view-iso-right-bottom', label: 'Iso right/bottom', Icon: ViewIsoRightBottom },
+  { name: 'view-bottom', label: 'Bottom', Icon: ViewBottom },
+  { name: 'view-iso-left-bottom', label: 'Iso left/bottom', Icon: ViewIsoLeftBottom },
+  { name: 'view-left', label: 'Left', Icon: ViewLeft },
+] as const;

package/src/layers/LayerContext.tsx

@@ -93,7 +93,7 @@ export interface ResolvedLayer {
 /**
  * Resolve a tier to a portal target and a `z-index`.
  *
- * @param rank Offset within the tier, for ordering peers — raising a clicked
+ * @param rank - Offset within the tier, for ordering peers — raising a clicked
  * window above its siblings, say. Bands are 1000 apart, so ranks below that stay
  * inside their tier. The offset means the same thing inside a `LayerScope` as
  * out, so a panel can be lifted above a scope's tooltips while staying under its

package/src/theme.css.ts

@@ -30,6 +30,8 @@ const tokens = {
 
 		active: 'rgba(20, 255, 60, 0.7)',
 		activeHover: 'rgba(20, 255, 60, 0.4)',
+		/** Electric blue for a toggle that is on. Brighter than the resting primary. */
+		on: '#2EE7FF',
 		successHover: '#2a6734b3',
 
 		text: '#E6EBEF',
@@ -79,6 +81,8 @@ const tokens = {
 			'linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))',
 		buttonGlassActive:
 			'linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))',
+		buttonGlassOn:
+			'linear-gradient(180deg, rgba(214, 251, 255, 0.55), rgba(0, 196, 255, 0.82) 48%, rgba(0, 72, 148, 0.96))',
 		buttonGlassDanger:
 			'linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))',
 		fieldGlass:
@@ -100,6 +104,7 @@ const tokens = {
 
 		glowPrimary: '0 0 18px rgba(97, 166, 232, 0.28)',
 		glowActive: '0 0 20px rgba(20, 255, 60, 0.26)',
+		glowOn: '0 0 20px rgba(46, 231, 255, 0.42)',
 		glowDanger: '0 0 20px rgba(230, 69, 52, 0.24)',
 
 		focusRing:
@@ -158,6 +163,7 @@ const varNames = {
 
 		active: 'zylem-color-active',
 		activeHover: 'zylem-color-active-hover',
+		on: 'zylem-color-on',
 		successHover: 'zylem-color-success-hover',
 
 		text: 'zylem-color-text',
@@ -197,6 +203,7 @@ const varNames = {
 		buttonGlass: 'zylem-material-button-glass',
 		buttonGlassHover: 'zylem-material-button-glass-hover',
 		buttonGlassActive: 'zylem-material-button-glass-active',
+		buttonGlassOn: 'zylem-material-button-glass-on',
 		buttonGlassDanger: 'zylem-material-button-glass-danger',
 		fieldGlass: 'zylem-material-field-glass',
 		panelHeaderGloss: 'zylem-material-panel-header-gloss',
@@ -212,6 +219,7 @@ const varNames = {
 
 		glowPrimary: 'zylem-effect-glow-primary',
 		glowActive: 'zylem-effect-glow-active',
+		glowOn: 'zylem-effect-glow-on',
 		glowDanger: 'zylem-effect-glow-danger',
 
 		focusRing: 'zylem-effect-focus-ring',

package/dist/chunk-YJVLOHJL.js

@@ -1 +0,0 @@
-var l={colors:{primary:"#61A6E8",primaryHover:"#3B8AD8",primaryActive:"#0C6EB8",accent:"#E64534",accentHover:"#C93A2C",accentActive:"#A82F24",background:"#11151C",backgroundTranslucent:"rgba(10, 20, 30, 0.46)",surface:"#1A1F27",surfaceHover:"#222831",border:"#2D3643",active:"rgba(20, 255, 60, 0.7)",activeHover:"rgba(20, 255, 60, 0.4)",successHover:"#2a6734b3",text:"#E6EBEF",textSecondary:"#88929E",consoleBackground:"rgba(20, 40, 60, 0.25)",consoleText:"#61A6E8"},spacing:{xxs:"0.125rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem",xxl:"2rem",xxxl:"3rem"},sizes:{icon:"28px",iconSm:"16px",iconLg:"96px"},typography:{fontFamily:"'Exo 2', sans-serif",fontFamilyMono:"'JetBrains Mono', ui-monospace, monospace",fontSize:"14px"},borders:{radius:"12px",width:"1.5px"},material:{glassPanel:"linear-gradient(180deg, rgba(38, 76, 112, 0.74), rgba(10, 24, 38, 0.58))",glassPanelDark:"linear-gradient(180deg, rgba(26, 31, 39, 0.75), rgba(10, 20, 30, 0.68))",glossyBar:"linear-gradient(180deg, rgba(205, 232, 255, 0.55) 0%, rgba(97, 166, 232, 0.34) 38%, rgba(18, 54, 88, 0.86) 100%)",buttonGlass:"linear-gradient(180deg, rgba(178, 219, 255, 0.34), rgba(30, 94, 148, 0.72) 48%, rgba(9, 34, 58, 0.92))",buttonGlassHover:"linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))",buttonGlassActive:"linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))",buttonGlassDanger:"linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))",fieldGlass:"linear-gradient(180deg, rgba(8, 19, 31, 0.82), rgba(15, 39, 62, 0.72))",panelHeaderGloss:"linear-gradient(180deg, rgba(190, 226, 255, 0.18), rgba(61, 118, 165, 0.16) 46%, rgba(10, 27, 44, 0.26))"},effects:{blurSm:"8px",blurMd:"14px",blurLg:"24px",shadowPanel:"0 22px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.10)",shadowButton:"inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.45), 0 2px 7px rgba(0,0,0,0.35)",shadowInset:"inset 0 1px 2px rgba(0,0,0,0.42), inset 0 -1px 0 rgba(255,255,255,0.08)",glowPrimary:"0 0 18px rgba(97, 166, 232, 0.28)",glowActive:"0 0 20px rgba(20, 255, 60, 0.26)",glowDanger:"0 0 20px rgba(230, 69, 52, 0.24)",focusRing:"0 0 0 2px rgba(97, 166, 232, 0.38), 0 0 18px rgba(97, 166, 232, 0.22)"},radii:{window:"14px",panel:"12px",button:"7px",control:"6px",card:"10px"},motion:{fast:"120ms",normal:"160ms",easeOut:"cubic-bezier(.2,.8,.2,1)"},art:{checkerLight:"#4F5C72",checkerDark:"#3C4759",canvasBorder:"rgba(150, 210, 255, 0.5)"},layers:{base:"0",panel:"1000",modal:"2000",popover:"3000",tooltip:"4000",menu:"5000"}},o={colors:{primary:"var(--zylem-color-primary)",primaryHover:"var(--zylem-color-primary-hover)",primaryActive:"var(--zylem-color-primary-active)",accent:"var(--zylem-color-accent)",accentHover:"var(--zylem-color-accent-hover)",accentActive:"var(--zylem-color-accent-active)",background:"var(--zylem-color-background)",backgroundTranslucent:"var(--zylem-color-background-translucent)",surface:"var(--zylem-color-surface)",surfaceHover:"var(--zylem-color-surface-hover)",border:"var(--zylem-color-border)",active:"var(--zylem-color-active)",activeHover:"var(--zylem-color-active-hover)",successHover:"var(--zylem-color-success-hover)",text:"var(--zylem-color-text)",textSecondary:"var(--zylem-color-text-secondary)",consoleBackground:"var(--zylem-color-console-background)",consoleText:"var(--zylem-color-console-text)"},spacing:{xxs:"var(--zylem-spacing-xxs)",xs:"var(--zylem-spacing-xs)",sm:"var(--zylem-spacing-sm)",md:"var(--zylem-spacing-md)",lg:"var(--zylem-spacing-lg)",xl:"var(--zylem-spacing-xl)",xxl:"var(--zylem-spacing-xxl)",xxxl:"var(--zylem-spacing-xxxl)"},sizes:{icon:"var(--zylem-size-icon)",iconSm:"var(--zylem-size-icon-sm)",iconLg:"var(--zylem-size-icon-lg)"},typography:{fontFamily:"var(--zylem-font-family)",fontFamilyMono:"var(--zylem-font-family-mono)",fontSize:"var(--zylem-font-size)"},borders:{radius:"var(--zylem-radius)",width:"var(--zylem-border)"},material:{glassPanel:"var(--zylem-material-glass-panel)",glassPanelDark:"var(--zylem-material-glass-panel-dark)",glossyBar:"var(--zylem-material-glossy-bar)",buttonGlass:"var(--zylem-material-button-glass)",buttonGlassHover:"var(--zylem-material-button-glass-hover)",buttonGlassActive:"var(--zylem-material-button-glass-active)",buttonGlassDanger:"var(--zylem-material-button-glass-danger)",fieldGlass:"var(--zylem-material-field-glass)",panelHeaderGloss:"var(--zylem-material-panel-header-gloss)"},effects:{blurSm:"var(--zylem-effect-blur-sm)",blurMd:"var(--zylem-effect-blur-md)",blurLg:"var(--zylem-effect-blur-lg)",shadowPanel:"var(--zylem-effect-shadow-panel)",shadowButton:"var(--zylem-effect-shadow-button)",shadowInset:"var(--zylem-effect-shadow-inset)",glowPrimary:"var(--zylem-effect-glow-primary)",glowActive:"var(--zylem-effect-glow-active)",glowDanger:"var(--zylem-effect-glow-danger)",focusRing:"var(--zylem-effect-focus-ring)"},radii:{window:"var(--zylem-radius-window)",panel:"var(--zylem-radius-panel)",button:"var(--zylem-radius-button)",control:"var(--zylem-radius-control)",card:"var(--zylem-radius-card)"},motion:{fast:"var(--zylem-motion-fast)",normal:"var(--zylem-motion-normal)",easeOut:"var(--zylem-motion-ease-out)"},art:{checkerLight:"var(--zylem-art-checker-light)",checkerDark:"var(--zylem-art-checker-dark)",canvasBorder:"var(--zylem-art-canvas-border)"},layers:{base:"var(--zylem-layer-base)",panel:"var(--zylem-layer-panel)",modal:"var(--zylem-layer-modal)",popover:"var(--zylem-layer-popover)",tooltip:"var(--zylem-layer-tooltip)",menu:"var(--zylem-layer-menu)"}};export{l as a,o as b};