@rogieking/figui3 9.3.0 → 9.4.1

package/.cursor/skills/fig-lab/SKILL.md

@@ -2,8 +2,8 @@
 name: fig-lab
 description: >-
   Guides FigUI3 experimental Lab components: fig-canvas-control,
-  fig-input-wheel, fig-reorder, and AI composer components, including React JSX usage.
-  APIs are unstable.
+  fig-input-audio, fig-input-wheel, fig-reorder, and AI composer components,
+  including React JSX usage. APIs are unstable.
 user-invocable: false
 ---
 
@@ -22,4 +22,4 @@ import "@rogieking/figui3/fig-lab.css";
 import "@rogieking/figui3/fig-lab.js";
 ```
 
-Use Lab for canvas handles, wheel inputs, reorder behavior, and AI composition surfaces. Keep Lab out of `fig.js`.
+Use Lab for audio and wheel inputs, canvas handles, reorder behavior, and AI composition surfaces. Keep Lab out of `fig.js`.

package/.cursor/skills/fig-lab/components.md

@@ -5,6 +5,26 @@ Experimental. APIs may change. React contract: [../figui3/react.md](../figui3/re
 
 Handlers below assume `onInput` / `onChange` from the React contract.
 
+## Inputs
+
+### `fig-input-audio`
+
+```tsx
+<fig-input-audio
+  accepts="audio/*"
+  label="Upload audio"
+  full
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Single-file waveform preview; no playback or seeking.
+- Attrs: `url`, `filename`, `label`, `accepts`, `variant`, `disabled`, `full`.
+- Props: `files`, `value`. Method: `clear()`.
+- `input` and `change` bubble with `{ files }`; clear adds `{ cleared: true }`.
+- URL previews require CORS access.
+
 ## Spatial
 
 ### `fig-canvas-control`
@@ -62,8 +82,8 @@ useEffect(() => {
 }, [onReorder]);
 ```
 
-- `display: contents`. Reorders **direct children**. `axis` `vertical` | `horizontal`. Omit `handle` to drag whole rows; set it when rows contain sliders/handles.
-- Event `reorder`: `{ oldIndex, newIndex, item }`. Nested drag is ignored for sliders, handles, and canvas controls.
+- `display: contents`. Reorders **direct children**. `axis` `vertical` | `horizontal`. `items` selector limits which children reorder (e.g. `items=".row"` to skip headers); `refresh()` re-syncs. Omit `handle` to drag whole rows; set it when rows contain sliders/handles.
+- Event `reorder`: `{ oldIndex, newIndex, item }` (indices among matching items). Nested drag is ignored for sliders, handles, and canvas controls.
 
 ## AI composer
 

package/.cursor/skills/fig-lab/reference.md

@@ -2,6 +2,24 @@
 
 React recipes: [components.md](components.md).
 
+## `fig-input-audio`
+
+Single-audio upload with a responsive, preview-only waveform.
+
+- Attrs: `url`, `filename`, `label` (default `Upload audio`), `accepts` (default `audio/*`), `variant`, `disabled`, `full`
+- Props: `files`, `value`
+- Method: `clear()`
+- Events: `input` and `change`, bubbling and composed, with `{ files }` and optional `cleared`
+- Clicking the waveform replaces the file; the minus action removes it
+- URL decoding requires CORS; fetch and decode failures fall back quietly
+- CSS: `--fig-input-audio-waveform-stroke-width` controls bar thickness (default `2px`)
+- Not supported: multiple files, playback, or seeking
+
+```html
+<fig-input-audio></fig-input-audio>
+<fig-input-audio url="https://example.com/audio.wav" filename="audio.wav" full></fig-input-audio>
+```
+
 ## `fig-input-wheel`
 
 Standalone interactive SVG tick + handle scrubber in the lab bundle.
@@ -37,9 +55,11 @@ Types: `point`, `color`, `point-radius`, `point-radius-angle`, `point-point`.
 
 ## `fig-reorder`
 
-Observed: `axis`, `handle`, `disabled`.
+Observed: `axis`, `handle`, `items`, `disabled`.
+
+`items`: CSS selector for which direct children are reorderable (default: all). Non-matching children stay in place and get `role="none"` unless they have a role. Class/attribute changes on children re-sync automatically; call `refresh()` to force it.
 
-Event `reorder`: `{ oldIndex, newIndex, item }`.
+Event `reorder`: `{ oldIndex, newIndex, item }`. Indices count matching items, not DOM positions.
 
 Nested drag is ignored for sliders, handles, and canvas controls so inner gestures still work. If a row is still stolen, set `handle` to a drag-affordance selector.
 

package/.cursor/skills/figui3/SKILL.md

@@ -3,8 +3,8 @@ name: figui3
 description: >-
   Guides FigUI3 core (`fig.js` / `fig.css`) web components for Figma-style plugin UIs,
   including React JSX usage. Use when adding, using, or debugging fig-* elements from
-  the core bundle—buttons, fields, overlays, menus, sliders, color/fill inputs, media,
-  dialogs, popups, toasts. Not for fig-select or fig-fill-picker (fig-editor),
+  the core bundle—buttons, fields, overlays, menus, toolbelts, sliders, color/fill inputs,
+  media, dialogs, popups, toasts. Not for fig-select or fig-fill-picker (fig-editor),
 user-invocable: false
 ---
 

package/.cursor/skills/figui3/components.md

@@ -341,6 +341,8 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `name`, `collapsible`, `open`, `compact`
+- Group `compact` is propagated to the direct `fig-header`.
+- In a collapsible group, the `h3` is the keyboard-accessible toggle and the chevron is clickable. For custom headers, place independent actions beside the `h3`, not inside it.
 
 ### `fig-header`
 
@@ -368,6 +370,33 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 <fig-content>Body</fig-content>
 ```
 
+### `fig-toolbelt` / `fig-toolbelt-group` / `fig-toolbelt-item`
+
+```tsx
+<fig-toolbelt
+  layout="horizontal"
+  overflow="buttons"
+  value={tool}
+  aria-label="Design tools"
+  onChange={onChange}
+>
+  <fig-toolbelt-group aria-label="Transform tools">
+    <fig-toolbelt-item value="move" selected={tool === "move" || undefined}>
+      Move
+    </fig-toolbelt-item>
+    <fig-toolbelt-item value="frame">Frame</fig-toolbelt-item>
+  </fig-toolbelt-group>
+</fig-toolbelt>
+```
+
+- Toolbelt attrs: `value`, `disabled`, `layout="horizontal|vertical"`, `overflow="buttons|scrollbar"`
+- Group: wraps related items; adjacent groups receive direction-aware separators
+- Item attrs: `value`, `selected`, `disabled`
+- ArrowLeft/ArrowRight move focus horizontally; ArrowUp/ArrowDown move focus vertically; Enter/Space selects
+- Items stay in light DOM; the internal `part="viewport"` owns scrolling and overflow fades
+- Overflow buttons are generated outside the viewport for `overflow="buttons"`
+- Events: `input` / `change` → `currentTarget.value`
+
 ### `fig-tabs` / `fig-tab` / `fig-tab-content`
 
 ```tsx

package/.cursor/skills/figui3/react.md

@@ -110,6 +110,9 @@ type FigTag =
   | "fig-tab"
   | "fig-tab-content"
   | "fig-tabs"
+  | "fig-toolbelt"
+  | "fig-toolbelt-group"
+  | "fig-toolbelt-item"
   | "fig-tooltip"
   | "fig-truncate"
   | "fig-video"
@@ -240,7 +243,7 @@ React owns child nodes. Components slot; they do not relocate children.
 
 - `fig-menu` items; trigger gets `slot="trigger"`
 - `fig-select-options slot="panel"`
-- `fig-tabs` / `fig-chooser` children
+- `fig-tabs` / `fig-toolbelt` / `fig-chooser` children
 - media `slot="overlay"`
 - fill custom `slot="mode-*"`
 

package/.cursor/skills/figui3/reference.md

@@ -70,6 +70,16 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 - `direction="horizontal|vertical"`
 - `label` or a child `<label>`
 
+## `fig-toolbelt`
+
+- Attrs: `value`, `disabled`, `layout="horizontal|vertical"`, `overflow="buttons|scrollbar"`; role `toolbar`
+- Direct `fig-toolbelt-item` or `fig-toolbelt-group` children; groups wrap related items and use role `group`
+- Items: `value`, `selected`, `disabled`; role `button`, `aria-pressed`
+- ArrowLeft/ArrowRight navigate horizontal layouts; ArrowUp/ArrowDown navigate vertical layouts; Home/End move roving focus; Enter/Space select
+- Events: bubbling `input` and `change` with the selected value
+- `overflow="scrollbar"` is the default and uses buttonless scrolling with the scrollbar hidden; `overflow="buttons"` adds direction-aware paging controls
+- Internal `part="viewport"` owns scrolling and fades; authored items remain direct light-DOM children
+
 ## `.fig-overflow-fade`
 
 - Apply the class to a vertical scroll container and constrain its height; add `fig-overflow-fade-horizontal` for horizontal scrolling.