@zylem/ui 0.8.11 → 0.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,10 @@
       "types": "./vite/index.ts",
       "import": "./vite/index.ts"
     },
+    "./icons": {
+      "types": "./src/icons/index.ts",
+      "import": "./src/icons/index.ts"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -49,15 +53,6 @@
     "src",
     "vite"
   ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "NODE_ENV=production tsup",
-    "dev": "tsup --watch",
-    "showcase": "vite --host",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "biome check ."
-  },
   "peerDependencies": {
     "solid-js": "^1.9.9"
   },
@@ -91,5 +86,12 @@
     "node": ">=22.12.0",
     "pnpm": ">=10.32.1"
   },
-  "packageManager": "pnpm@10.33.0"
-}
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "showcase": "vite --host",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check ."
+  }
+}

package/src/components/WindowControls/WindowControls.css.ts

@@ -1,59 +1,89 @@
 import { globalStyle } from '@vanilla-extract/css';
 import { vars } from '../../theme.css';
 
+/** Soft drop plus a light top rim and a darker lower edge. */
+const jewelDepth =
+  'inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.4)';
+
 globalStyle('.zylem-window-controls', {
   display: 'flex',
   alignItems: 'center',
-  gap: '7px',
+  flexShrink: 0,
+  gap: '6px',
 });
 
 /**
- * Shared glass icon button used for all panel chrome: window controls,
- * floating panels, and detached panels. `.floating-panel-button` is kept as
- * an alias so existing panel markup shares this single definition.
+ * Shared glass jewel used for all panel chrome: window controls, floating
+ * panels, and detached panels. `.floating-panel-button` is kept as an alias
+ * so existing panel markup shares this single definition.
+ *
+ * Collapse (and the untyped alias) is blue glass; close is red glass.
  */
 globalStyle('.zylem-window-control, .floating-panel-button', {
   all: 'unset',
   boxSizing: 'border-box',
+  position: 'relative',
   cursor: 'pointer',
-  minWidth: '18px',
+  flexShrink: 0,
+  width: '28px',
   height: '18px',
-  padding: '0 4px',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  fontSize: '10px',
-  lineHeight: 1,
-  color: '#F4FAFF',
-  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
-  borderRadius: vars.radii.control,
-  border: '1px solid rgba(255,255,255,0.38)',
-  background: vars.material.buttonGlass,
-  boxShadow:
-    'inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.4)',
-  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+  color: '#FFFFFF',
+  borderRadius: '6px',
+  border: '1px solid rgba(214, 234, 255, 0.82)',
+  background:
+    'linear-gradient(180deg, rgba(206, 230, 255, 0.78) 0%, rgba(96, 158, 216, 0.84) 42%, rgba(48, 108, 172, 0.92) 100%)',
+  boxShadow: `${jewelDepth}, 0 0 8px rgba(97, 166, 232, 0.28)`,
+  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+/** Top-edge gloss. Clipped by the button; the icon sits above it. */
+globalStyle('.zylem-window-control::before, .floating-panel-button::before', {
+  content: '""',
+  position: 'absolute',
+  left: '2px',
+  right: '2px',
+  top: '1px',
+  height: '48%',
+  borderRadius: '5px 5px 46% 46%',
+  background:
+    'linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.1) 55%, rgba(255,255,255,0))',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-window-control svg, .floating-panel-button svg', {
+  position: 'relative',
+  zIndex: 1,
+  display: 'block',
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.4))',
+});
+
+globalStyle('.zylem-window-control--close', {
+  borderColor: 'rgba(255, 198, 188, 0.88)',
+  background:
+    'linear-gradient(180deg, rgba(255, 196, 186, 0.78) 0%, rgba(228, 82, 70, 0.9) 44%, rgba(186, 46, 40, 0.96) 100%)',
+  boxShadow: `${jewelDepth}, 0 0 8px rgba(230, 69, 52, 0.34)`,
 });
 
 globalStyle('.zylem-window-control:hover, .floating-panel-button:hover', {
-  filter: 'brightness(1.2)',
+  filter: 'brightness(1.12)',
   transform: 'translateY(-1px)',
 });
 
 globalStyle('.zylem-window-control:active, .floating-panel-button:active', {
-  filter: 'brightness(0.9)',
+  filter: 'brightness(0.92)',
   transform: 'translateY(1px)',
 });
 
 globalStyle(
   '.zylem-window-control:focus-visible, .floating-panel-button:focus-visible',
   {
-    boxShadow: `inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.4), ${vars.effects.focusRing}`,
+    boxShadow: `${jewelDepth}, 0 0 8px rgba(97, 166, 232, 0.28), ${vars.effects.focusRing}`,
   },
 );
 
-/** Close is neutral glass at rest and only turns accent on hover. */
-globalStyle('.zylem-window-control--close:hover', {
-  background: vars.colors.accent,
-  borderColor: 'rgba(255, 160, 150, 0.75)',
-  boxShadow: `inset 1px 1px 0 rgba(255,255,255,0.4), inset -1px -1px 0 rgba(0,0,0,0.4), ${vars.effects.glowDanger}`,
+globalStyle('.zylem-window-control--close:focus-visible', {
+  boxShadow: `${jewelDepth}, 0 0 8px rgba(230, 69, 52, 0.34), ${vars.effects.focusRing}`,
 });

package/src/components/WindowControls/WindowControls.tsx

@@ -1,6 +1,6 @@
 import { Show } from 'solid-js';
-import PanelBottomClose from 'lucide-solid/icons/panel-bottom-close';
-import PanelBottomOpen from 'lucide-solid/icons/panel-bottom-open';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
+import ChevronUp from 'lucide-solid/icons/chevron-up';
 import X from 'lucide-solid/icons/x';
 
 export interface WindowControlsProps {
@@ -17,8 +17,8 @@ export interface WindowControlsProps {
 }
 
 /**
- * Shared glass window controls: the same icon buttons used by floating and
- * detached panels. Only controls with a handler are rendered.
+ * Shared glass window controls: blue collapse jewel and red close jewel, used
+ * by floating and detached panels. Only controls with a handler are rendered.
  */
 export function WindowControls(props: WindowControlsProps) {
   return (
@@ -32,7 +32,11 @@ export function WindowControls(props: WindowControlsProps) {
             title={props.collapsed ? 'Expand panel' : 'Collapse panel'}
             onClick={() => props.onCollapse?.()}
           >
-            {props.collapsed ? <PanelBottomOpen size={12} /> : <PanelBottomClose size={12} />}
+            {props.collapsed ? (
+              <ChevronUp size={11} strokeWidth={2.5} />
+            ) : (
+              <ChevronDown size={11} strokeWidth={2.5} />
+            )}
           </button>
         </Show>
         <Show when={props.onClose}>
@@ -44,7 +48,7 @@ export function WindowControls(props: WindowControlsProps) {
             data-testid={props.closeTestId}
             onClick={() => props.onClose?.()}
           >
-            <X size={12} />
+            <X size={11} strokeWidth={2.5} />
           </button>
         </Show>
       </div>

package/src/components/index.ts

@@ -217,3 +217,20 @@ export {
   type TransportBarProps,
   type TransportTimeSignature,
 } from './TransportBar/TransportBar';
+
+// Camera icons (Lucide-shaped originals; also `@zylem/ui/icons`)
+export {
+  CAMERA_ICONS,
+  FreePerspective,
+  GameCamera,
+  IsometricPerspective,
+  Perspective,
+  SideviewPerspective,
+  TopDownPerspective,
+  cameraIconNodes,
+  createZylemIcon,
+  type CameraIcon,
+  type CameraIconName,
+  type IconNode,
+  type ZylemIconProps,
+} from '../icons';

package/src/icons/create-icon.tsx

@@ -0,0 +1,71 @@
+import { For, splitProps, type Component, type JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import type { IconNode } from './icon-nodes';
+
+export interface ZylemIconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+  color?: string;
+  size?: string | number;
+  strokeWidth?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+const DEFAULTS = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
+} as const;
+
+function kebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Solid icon factory matching lucide-solid's size / color / strokeWidth
+ * props so these glyphs drop into the same toolbar buttons and CSS.
+ */
+export function createZylemIcon(
+  name: string,
+  iconNode: IconNode,
+): Component<ZylemIconProps> {
+  const Icon: Component<ZylemIconProps> = (props) => {
+    const [local, rest] = splitProps(props, [
+      'color',
+      'size',
+      'strokeWidth',
+      'class',
+      'absoluteStrokeWidth',
+    ]);
+    const size = () => local.size ?? 24;
+    const strokeWidth = () => {
+      const width = Number(local.strokeWidth ?? 2);
+      if (local.absoluteStrokeWidth) {
+        return (width * 24) / Number(size());
+      }
+      return width;
+    };
+    const classes = () =>
+      ['zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
+        .filter((value) => Boolean(value))
+        .join(' ');
+
+    return (
+      <svg
+        {...DEFAULTS}
+        width={size()}
+        height={size()}
+        stroke={local.color ?? 'currentColor'}
+        stroke-width={strokeWidth()}
+        class={classes()}
+        aria-hidden="true"
+        {...rest}
+      >
+        <For each={iconNode}>
+          {([element, attrs]) => <Dynamic component={element} {...attrs} />}
+        </For>
+      </svg>
+    );
+  };
+  return Icon;
+}

package/src/icons/icon-nodes.ts

@@ -0,0 +1,75 @@
+/**
+ * Original Zylem camera icons as Lucide-style SVG node lists.
+ * 24×24 viewBox, 2-unit stroke, no fill, rounded caps and joins.
+ */
+export type IconNode = [
+  elementName: 'rect' | 'path',
+  attributes: Record<string, string>,
+][];
+
+export const PerspectiveNode: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'm18 7 4-3m-4 13 4 3' }],
+];
+
+export const SideviewPerspectiveNode: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'M18 6h4v12h-4' }],
+];
+
+export const TopDownPerspectiveNode: IconNode = [
+  ['rect', { x: '8', y: '2', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10-2 4h8l-2-4' }],
+  ['path', { d: 'M6 18v4h12v-4' }],
+];
+
+export const FreePerspectiveNode: IconNode = [
+  ['rect', { x: '7', y: '9', width: '7', height: '6', rx: '1' }],
+  ['path', { d: 'm14 11 3-2v6l-3-2' }],
+  ['path', { d: 'M3 8a9 9 0 0 1 15-3' }],
+  ['path', { d: 'M18 2v3h-3' }],
+  ['path', { d: 'M21 16a9 9 0 0 1-15 3' }],
+  ['path', { d: 'M6 22v-3h3' }],
+];
+
+/** Source: `src/icons/svg/camera-isometric.svg` */
+export const IsometricPerspectiveNode: IconNode = [
+  ['path', { d: 'M11.549 11.368 2 5.855' }],
+  ['path', { d: 'M11.549 19.944 11.549 17.252' }],
+  ['path', { d: 'M11.549 14.06 11.549 11.368' }],
+  ['path', { d: 'M11.549 19.944 2 14.431' }],
+  ['path', { d: 'M2 14.431 2 5.855' }],
+  ['path', { d: 'M2 5.855 6.775 3.098' }],
+  ['path', { d: 'M6.775 3.098 16.324 8.611' }],
+  ['path', { d: 'M11.549 11.368 16.324 8.611' }],
+  ['path', { d: 'M16.324 8.611 16.324 11.151' }],
+  ['path', { d: 'M13.749 18.674 11.549 19.944' }],
+  ['path', { d: 'M15.887 10.899 21.192 13.962' }],
+  ['path', { d: 'M11.986 17.656 17.291 20.719' }],
+  ['path', { d: 'M15.887 10.899A3.901 2.252 -60 0 0 11.986 17.656' }],
+  [
+    'path',
+    {
+      d: 'M21.192 13.962A3.901 2.252 -60 1 1 17.291 20.719A3.901 2.252 -60 1 1 21.192 13.962Z',
+    },
+  ],
+];
+export const GameCameraNode: IconNode = [
+  ['rect', { x: '2', y: '6', width: '16', height: '12', rx: '2' }],
+  ['path', { d: 'm18 10 4-3v10l-4-3' }],
+  ['path', { d: 'M6 12h4m-2-2v4' }],
+  ['path', { d: 'M14 10h.01M14 14h.01' }],
+];
+
+export const cameraIconNodes = {
+  perspective: PerspectiveNode,
+  'sideview-perspective': SideviewPerspectiveNode,
+  'top-down-perspective': TopDownPerspectiveNode,
+  'isometric-perspective': IsometricPerspectiveNode,
+  'free-perspective': FreePerspectiveNode,
+  'game-camera': GameCameraNode,
+} as const;
+
+export type CameraIconName = keyof typeof cameraIconNodes;

package/src/icons/index.ts

@@ -0,0 +1,54 @@
+import type { Component } from 'solid-js';
+import { createZylemIcon, type ZylemIconProps } from './create-icon';
+import {
+  FreePerspectiveNode,
+  GameCameraNode,
+  IsometricPerspectiveNode,
+  PerspectiveNode,
+  SideviewPerspectiveNode,
+  TopDownPerspectiveNode,
+} from './icon-nodes';
+
+export type { IconNode, CameraIconName } from './icon-nodes';
+export {
+  cameraIconNodes,
+  FreePerspectiveNode,
+  GameCameraNode,
+  IsometricPerspectiveNode,
+  PerspectiveNode,
+  SideviewPerspectiveNode,
+  TopDownPerspectiveNode,
+} from './icon-nodes';
+export { createZylemIcon, type ZylemIconProps } from './create-icon';
+
+export type CameraIcon = Component<ZylemIconProps>;
+
+/** Recorder with diverging FOV rays. */
+export const Perspective = createZylemIcon('Perspective', PerspectiveNode);
+/** Recorder facing a vertical view plane (side / ortho). */
+export const SideviewPerspective = createZylemIcon(
+  'SideviewPerspective',
+  SideviewPerspectiveNode,
+);
+/** Downward recorder facing a horizontal plane (top-down). */
+export const TopDownPerspective = createZylemIcon(
+  'TopDownPerspective',
+  TopDownPerspectiveNode,
+);
+/** Isometric camera body with lens (from camera-isometric.svg). */
+export const IsometricPerspective = createZylemIcon(
+  'IsometricPerspective',
+  IsometricPerspectiveNode,
+);/** Recorder with two orbit arrows (free / orbit camera). */
+export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiveNode);
+/** Recorder with controller buttons (game camera). */
+export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
+
+export const CAMERA_ICONS = [
+  { name: 'perspective', label: 'Perspective', Icon: Perspective },
+  { name: 'sideview-perspective', label: 'Side view', Icon: SideviewPerspective },
+  { name: 'top-down-perspective', label: 'Top down', Icon: TopDownPerspective },
+  { name: 'isometric-perspective', label: 'Isometric', Icon: IsometricPerspective },
+  { name: 'free-perspective', label: 'Free / orbit', Icon: FreePerspective },
+  { name: 'game-camera', label: 'Game camera', Icon: GameCamera },
+] as const;

package/src/icons/svg/camera-isometric.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.549 11.368 2 5.855" />
+  <path d="M11.549 19.944 11.549 17.252" />
+  <path d="M11.549 14.06 11.549 11.368" />
+  <path d="M11.549 19.944 2 14.431" />
+  <path d="M2 14.431 2 5.855" />
+  <path d="M2 5.855 6.775 3.098" />
+  <path d="M6.775 3.098 16.324 8.611" />
+  <path d="M11.549 11.368 16.324 8.611" />
+  <path d="M16.324 8.611 16.324 11.151" />
+  <path d="M13.749 18.674 11.549 19.944" />
+  <path d="M15.887 10.899 21.192 13.962" />
+  <path d="M11.986 17.656 17.291 20.719" />
+  <path d="M15.887 10.899A3.901 2.252 -60 0 0 11.986 17.656" />
+  <path d="M21.192 13.962A3.901 2.252 -60 1 1 17.291 20.719A3.901 2.252 -60 1 1 21.192 13.962Z" />
+</svg>

package/src/icons/svg/free-perspective.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="7" y="9" width="7" height="6" rx="1" />
+  <path d="m14 11 3-2v6l-3-2" />
+  <path d="M3 8a9 9 0 0 1 15-3" />
+  <path d="M18 2v3h-3" />
+  <path d="M21 16a9 9 0 0 1-15 3" />
+  <path d="M6 22v-3h3" />
+</svg>

package/src/icons/svg/game-camera.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="6" width="16" height="12" rx="2" />
+  <path d="m18 10 4-3v10l-4-3" />
+  <path d="M6 12h4m-2-2v4" />
+  <path d="M14 10h.01M14 14h.01" />
+</svg>

package/src/icons/svg/perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="8" width="8" height="8" rx="2" />
+  <path d="m10 10 4-2v8l-4-2" />
+  <path d="m18 7 4-3m-4 13 4 3" />
+</svg>

package/src/icons/svg/sideview-perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="8" width="8" height="8" rx="2" />
+  <path d="m10 10 4-2v8l-4-2" />
+  <path d="M18 6h4v12h-4" />
+</svg>

package/src/icons/svg/top-down-perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="8" y="2" width="8" height="8" rx="2" />
+  <path d="m10 10-2 4h8l-2-4" />
+  <path d="M6 18v4h12v-4" />
+</svg>