@zylem/ui 0.9.7 → 0.9.9

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