Section

Designer

Composable canvas-editor primitives. The chrome lives in @hilum/designer (engine-agnostic) and the canvas engine in @hilum/designer-canvas (generic free-positioned canvas with a pluggable renderer registry).

How To Use This Page

Designer pages document the composition environment itself: canvas behavior, shell layout, and pane orchestration.

Use this section when you are working on authoring workflows rather than end-user UI alone.

How The Content Is Grouped

The top-level Designer page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
Use the highlighted links below to start with the highest-signal areas of the section.

Start With

Shell

Canvas

Static Frame

Pane Visibility

Runnable demos

Start with a working surface

@hilum/designer

Shell

DesignerShell, Header, Sidebar, Panel, Pane, Toolbar — engine-agnostic chrome.

Open

@hilum/designer-canvas

Canvas

Live demo of <Designer> + <DesignerCanvas> + <DesignerFrame>. Drag, marquee-select, zoom.

Open

@hilum/designer-canvas

Static Frame

Read-only DesignerStaticFrame for thumbnails / previews. Same renderers, no interactivity.

Open

@hilum/designer

Pane Visibility

Interactive demo of DesignerPane.showFor with multiple layer types selected.

Open

Property controls

Dense inspector inputs

TwoValueControl

Paired numeric values for geometry and offsets.

Position

SpacingControl

Four sides with optional linked editing.

Margins

CornerRadiusControl

Corner-specific values over the same four-value base.

Corners

Exported API

Components, providers, hooks, and actions

@hilum/designer

Engine-agnostic editor chrome for shells, panes, panels, sidebars, and toolbar controls.

ShellProvider

Provider

Provides selectedIds, activeTool, readOnly, and resolveKind to designer chrome.

useShellContext

Hook

Reads and updates the shell state from toolbars, panes, sidebars, and app controls.

DesignerShell

Layout

Root full-height shell that hosts header, sidebar, canvas, panels, and toolbars.

DesignerHeader

Layout

Top chrome for document title, breadcrumbs, status, and primary actions.

DesignerSidebar

Navigation

Vertical tool or mode rail wired to activeTool through ShellContext.

DesignerPanel

Layout

Left or right inspector panel with configurable width and border side.

DesignerPane

Inspector

Panel section with collapsible state and showFor visibility by selected item kind.

DesignerPaneTitle

Inspector

Pane header with optional action content and collapse trigger behavior.

DesignerPaneContent

Inspector

Consistent content spacing for property rows and controls inside a pane.

TwoValueControl

Inspector

Compact paired numeric fields for properties such as X/Y, W/H, and offsets.

FourValueControl

Inspector

Generic 2×2 numeric control with linked/unlinked behavior for sides and corners.

SpacingControl / CornerRadiusControl

Inspector

Semantic wrappers over FourValueControl for padding, margins, and corner radii.

DesignerToolbar

Toolbar

Floating or inline toolbar container for canvas and document actions.

DesignerToolbarGroup

Toolbar

Groups related toolbar controls without creating extra layout chrome.

DesignerToolbarButton

Toolbar

Tooltip-ready icon button with active, disabled, label, and shortcut states.

DesignerToolbarSeparator

Toolbar

Visual divider for related toolbar button groups.

useHistory

Hook

Small undo/redo state helper for editor workflows that need local history.

useKeybindings

Hook

Registers keyboard shortcuts with enablement and cleanup handled by the hook.

@hilum/designer-canvas

Generic free-positioned canvas engine with context state, renderers, overlays, hooks, and actions.

Designer

Composition

High-level provider composition for canvas state, shell context, and renderer registry.

CanvasProvider

Provider

Owns canvas state, dispatch, selection, viewport, pan, zoom, and history wiring.

useCanvasContext

Hook

Reads canvas state and dispatch from custom inspectors, overlays, and actions.

RendererProvider

Provider

Registers layer renderers by type so the canvas can stay engine-agnostic.

DesignerCanvas

Canvas

Interactive surface that hosts frames, overlays, pointer selection, and pan behavior.

DesignerFrame

Canvas

Editable frame that renders positioned layers with the active renderer registry.

DesignerStaticFrame

Preview

Read-only frame for thumbnails, previews, and catalog examples.

GridOverlay

Overlay

Draws grid guides from the frame and viewport state.

LayerSelectionOverlay

Overlay

Displays selected-layer outlines and handles on top of rendered layers.

MarqueeOverlay

Overlay

Displays drag-selection bounds while selecting multiple layers.

useLayers / useLayer / useSelectedLayers

Hooks

Convenience readers for layer lists, individual layers, and current selection.

useZoom / useDragInteraction / useHistoryActions

Hooks

Canvas interaction helpers for viewport controls, dragging, and undo or redo actions.

ActionAddLayer / ActionAlign / ActionArrange

Actions

Reusable toolbar actions for creating layers and controlling layer position.

ActionDelete / ActionDuplicate / ActionGroup

Actions

Reusable toolbar actions for common document editing commands.

ActionLock / ActionTool / ActionTransform / ActionUndoRedo / ActionZoom

Actions

Reusable controls for locks, tools, transforms, history, and viewport zoom.

Integration contracts

Behavior that apps wire themselves

DesignerPane.showFor

Accepts selected item kinds and renders the pane only when ShellContext.resolveKind returns a matching kind.

ShellContext.resolveKind

Maps opaque selected IDs to app-defined layer kinds such as text, image, shape, or group.

Renderer registry

Maps layer type strings to app-owned React renderers so the canvas package does not own domain UI.

Static frame rendering

Uses the same canvas state and renderers without pointer interactions for thumbnails and previews.