@rogieking/figui3 9.2.3 → 9.4.0

package/README.md

@@ -76,7 +76,8 @@ Agent skills ship in `.cursor/skills/` (included in the npm package):
 
 - `figui3` — core `fig.js` components
 - `fig-editor` — `fig-select` and `fig-fill-picker`
-- `propkit` — `/propskit` property-row composition
+- `fig-lab` — experimental audio, wheel, reorder, canvas, and AI components
+- `propkit` — property-row composition; examples are included in `/figui3`
 
 Minimal example:
 
@@ -103,6 +104,7 @@ Minimal example:
 | [Radio](#radio) | `<fig-radio>` | Radio button |
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
+| [Audio Input](#audio-input) | `<fig-input-audio>` | Audio upload with responsive waveform preview |
 | [Input Wheel](#input-wheel) | `<fig-input-wheel>` | Standalone SVG tick-and-handle numeric scrubber |
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
 | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
@@ -114,6 +116,7 @@ Minimal example:
 | [Gradient Input](#gradient-input) | `<fig-input-gradient>` | Gradient editor with stops |
 | [Fill Input](#fill-input) | `<fig-input-fill>` | Solid, gradient, image, video fill |
 | [Fill Picker](#fill-picker) | `<fig-fill-picker>` | Full fill picker dialog |
+| [Toolbelt](#toolbelt) | `<fig-toolbelt>` / `<fig-toolbelt-group>` / `<fig-toolbelt-item>` | Groupable selectable toolbar with directional overflow |
 | [Tabs](#tabs) | `<fig-tabs>` / `<fig-tab>` | Tabbed navigation |
 | [Segmented Control](#segmented-control) | `<fig-segmented-control>` / `<fig-segment>` | Segmented button group |
 | [Chooser](#chooser) | `<fig-chooser>` / `<fig-choice>` | Selection list with drag scroll |
@@ -402,6 +405,37 @@ For `type="range"`, omitting `value` follows native range behavior and starts at
 
 ---
 
+#### Audio Input
+
+`<fig-input-audio>`
+
+An experimental single-audio upload control with a responsive waveform preview. Requires `fig-lab.js` and `fig-lab.css`. The waveform is preview-only and has no playback or seeking controls.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `url` | string | — | CORS-enabled audio URL to decode and preview |
+| `filename` | string | URL filename | Display filename for URL-backed audio |
+| `label` | string | `"Upload audio"` | Empty-state upload label |
+| `accepts` | string | `"audio/*"` | Native file accept filter |
+| `variant` | string | `"input"` | Upload button variant |
+| `disabled` | boolean | `false` | Disable upload, replacement, and removal |
+| `full` | boolean | `false` | Fill the available width |
+
+Set `--fig-input-audio-waveform-stroke-width` (default `2px`) to control waveform bar thickness.
+
+`files` and `value` mirror the composed file input. `clear()` removes the current source. The component emits bubbling, composed `input` and `change` events with `{ files }` and `{ files, cleared: true }` when cleared. URL fetch or decode failures render a quiet flat waveform fallback.
+
+```html
+<fig-input-audio></fig-input-audio>
+<fig-input-audio
+  url="https://example.com/audio.wav"
+  filename="audio.wav"
+  full
+></fig-input-audio>
+```
+
+---
+
 #### Input Wheel
 
 `<fig-input-wheel>`
@@ -735,6 +769,37 @@ Webcam JSON is `{ type: "webcam", webcam: { live, snapshot, deviceId, scaleMode,
 
 ### Selection
 
+#### Toolbelt
+
+`<fig-toolbelt>` / `<fig-toolbelt-group>` / `<fig-toolbelt-item>`
+
+A selectable horizontal or vertical toolbar that keeps authored items in the light DOM. Its internal `part="viewport"` owns scrolling and overflow fades, while generated paging buttons remain outside the masked viewport.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `value` | string | — | Selected item value |
+| `disabled` | boolean | `false` | Disable all items |
+| `layout` | `horizontal` \| `vertical` | `horizontal` | Item and keyboard-navigation direction |
+| `overflow` | `buttons` \| `scrollbar` | `scrollbar` | Generated paging buttons or buttonless scrolling; scrollbars remain hidden |
+
+Wrap related items in `fig-toolbelt-group`; adjacent groups receive a direction-aware separator. Add `aria-label` to groups when the grouping has a meaningful name. Items support `value`, `selected`, and `disabled`. `input` and `change` bubble from the toolbelt with the selected value. ArrowLeft/ArrowRight navigate horizontal toolbelts; ArrowUp/ArrowDown navigate vertical toolbelts. Home and End move to the edges; Enter or Space selects the focused item.
+
+Use `--fig-toolbelt-gap`, `--fig-toolbelt-group-gap`, `--fig-toolbelt-group-separator-color`, `--fig-toolbelt-overflow-fade-size`, `--fig-toolbelt-padding-block`, `--fig-toolbelt-padding-inline`, `--fig-toolbelt-item-height`, and `--fig-toolbelt-item-padding` to customize layout. The toolbelt fade defaults to `calc(var(--spacer-6) + var(--spacer-2))`.
+
+```html
+<fig-toolbelt layout="horizontal" overflow="buttons" value="move" aria-label="Design tools">
+  <fig-toolbelt-group aria-label="Transform tools">
+    <fig-toolbelt-item value="move" selected>Move</fig-toolbelt-item>
+    <fig-toolbelt-item value="frame">Frame</fig-toolbelt-item>
+  </fig-toolbelt-group>
+  <fig-toolbelt-group aria-label="Shape tools">
+    <fig-toolbelt-item value="shape">Shape</fig-toolbelt-item>
+  </fig-toolbelt-group>
+</fig-toolbelt>
+```
+
+---
+
 #### Tabs
 
 `<fig-tabs>` / `<fig-tab>` — [demo](https://rog.ie/figui3/#tabs)
@@ -1780,7 +1845,7 @@ git clone https://github.com/rogie/figui3.git
 cd figui3
 bun install
 bun dev                # Component docs at http://localhost:3000
-npm run dev:playground # Playground at http://localhost:5173 (/figui3, /propkit, /sandbox)
+npm run dev:playground # Playground at http://localhost:6600 (/figui3, /lab, /sandbox)
 npm run build          # Build minified dist/ (JS + CSS)
 npm run build:css      # Build minified CSS only
 ```
@@ -1809,8 +1874,8 @@ import "@rogieking/figui3/src/fig.css";  // unminified source
 
 The playground is the fastest way to explore and validate component markup:
 
-- **`/figui3`** — component examples with attribute controls
-- **`/propkit`** — property panel patterns
+- **`/figui3`** — component examples and property panel patterns with attribute controls
+- **`/lab`** — experimental component examples
 - **`/sandbox`** — styled React sample app
 
 ---

package/components.css

@@ -1120,7 +1120,7 @@ fig-property-button {
       stroke: currentColor;
     }
   }
-  &:has(svg:first-child):not([icon]) {
+  &:not(fig-property-button):has(svg:first-child):not([icon]) {
     padding-left: var(--spacer-1);
   }
 
@@ -1290,6 +1290,70 @@ fig-tab {
     cursor: default;
   }
 }
+
+
+
+fig-toolbelt-item {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: var(--fig-toolbelt-item-height, var(--control-height));
+  padding-inline: var(--fig-toolbelt-item-padding, var(--spacer-2));
+  border-radius: var(--radius-medium);
+  color: var(--figma-color-text-secondary);
+  line-height: var(--line-height);
+  cursor: default;
+  user-select: none;
+
+  &:has(> fig-tooltip > fig-button[icon]:not([icon="false"])) {
+    padding-inline: 0;
+  }
+
+  &[selected]:not([selected="false"]) {
+    color: var(--figma-color-text);
+    background-color: var(--figma-color-bg-secondary);
+
+    fig-button{
+      color: var(--figma-color-icon-onbrand);
+      background-color: var(--figma-color-bg-brand);
+    }
+  }
+
+  &:hover {
+    background-color: var(--figma-color-bg-secondary);
+  }
+
+  &:focus-visible,
+  &[data-focus-visible] {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+fig-toolbelt-group {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: stretch;
+  gap: var(--fig-toolbelt-gap);
+  min-width: 0;
+
+  & + fig-toolbelt-group {
+    margin-inline-start: calc(
+      var(--fig-toolbelt-group-gap) - var(--fig-toolbelt-gap)
+    );
+    padding-inline-start: var(--fig-toolbelt-group-gap);
+    border-inline-start: 1px solid
+      var(--fig-toolbelt-group-separator-color);
+  }
+}
+
 fig-tab-content {
   display: block;
   width: 100%;
@@ -1410,6 +1474,171 @@ fig-tabs,
   }
 }
 
+fig-toolbelt {
+  --fig-toolbelt-gap: var(--spacer-1);
+  --fig-toolbelt-group-gap: var(--spacer-2);
+  --fig-toolbelt-group-separator-color: var(--figma-color-border);
+  --fig-toolbelt-overflow-fade-size: calc(var(--spacer-6) + var(--spacer-2));
+  --fig-toolbelt-padding-block: var(--spacer-2);
+  --fig-toolbelt-padding-inline: var(--spacer-2);
+
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  background: var(--figma-color-bg) !important;
+  border-radius: var(--radius-large);
+
+  &::after{
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 10;
+    box-shadow: var(--figma-elevation-100-canvas);
+    border-radius: var(--radius-large);
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+  }
+
+  &::part(frame) {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &::part(viewport) {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: row nowrap;
+    box-sizing: border-box;
+    gap: var(--fig-toolbelt-gap);
+    width: 100%;
+    min-width: 0;
+    padding: var(--fig-toolbelt-padding-block)
+      var(--fig-toolbelt-padding-inline);
+    overflow: auto hidden;
+    scrollbar-width: none;
+  }
+
+  &::part(viewport)::-webkit-scrollbar {
+    display: none;
+  }
+
+  > .fig-overflow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    width: var(--control-height);
+    height: auto;
+    margin: 0;
+  }
+
+  > .fig-overflow-start {
+    left: 0;
+    right: auto;
+    box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
+
+    &::before {
+      border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+    }
+
+    .fig-overflow-chevron {
+      rotate: 90deg;
+    }
+  }
+
+  > .fig-overflow-end {
+    right: 0;
+    left: auto;
+    box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
+
+    &::before {
+      border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+    }
+
+    .fig-overflow-chevron {
+      rotate: -90deg;
+    }
+  }
+
+  &[layout="vertical"] {
+    width: fit-content;
+    max-width: 100%;
+
+    &::part(frame),
+    &::part(viewport) {
+      flex-flow: column nowrap;
+    }
+
+    &::part(viewport) {
+      overflow: hidden auto;
+    }
+
+    fig-toolbelt-group {
+      flex-flow: column nowrap;
+      width: 100%;
+
+      & + fig-toolbelt-group {
+        margin-block-start: calc(
+          var(--fig-toolbelt-group-gap) - var(--fig-toolbelt-gap)
+        );
+        margin-inline-start: 0;
+        padding-block-start: var(--fig-toolbelt-group-gap);
+        padding-inline-start: 0;
+        border-block-start: 1px solid
+          var(--fig-toolbelt-group-separator-color);
+        border-inline-start: 0;
+      }
+    }
+
+    > .fig-overflow {
+      top: auto;
+      right: 0;
+      left: 0;
+      width: auto;
+      height: var(--control-height);
+    }
+
+    > .fig-overflow-start {
+      top: 0;
+      bottom: auto;
+      box-shadow: 0 1px 0 0 var(--figma-color-bordertranslucent);
+
+      &::before {
+        border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+      }
+
+      .fig-overflow-chevron {
+        rotate: 180deg;
+      }
+    }
+
+    > .fig-overflow-end {
+      top: auto;
+      bottom: 0;
+      box-shadow: 0 -1px 0 0 var(--figma-color-bordertranslucent);
+
+      &::before {
+        border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+      }
+
+      .fig-overflow-chevron {
+        rotate: 0deg;
+      }
+    }
+  }
+}
+
 /* Avatar */
 fig-avatar,
 .fig-avatar {
@@ -5389,6 +5618,13 @@ fig-skeleton {
   overflow-y: auto;
 }
 
+fig-toolbelt::part(viewport) {
+  --fig-overflow-fade-size: var(--fig-toolbelt-overflow-fade-size);
+  --fig-overflow-fade-clear-top: 0px;
+
+  overflow-y: auto;
+}
+
 .fig-overflow-fade.fig-overflow-fade-horizontal {
   --fig-overflow-fade-clear-left: 0px;
 
@@ -5396,8 +5632,16 @@ fig-skeleton {
   overflow-y: hidden;
 }
 
+fig-toolbelt:not([layout="vertical"])::part(viewport) {
+  --fig-overflow-fade-clear-left: 0px;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 @supports (animation-timeline: scroll(self block)) {
-  .fig-overflow-fade:not(.fig-overflow-fade-horizontal) {
+  .fig-overflow-fade:not(.fig-overflow-fade-horizontal),
+  fig-toolbelt[layout="vertical"]::part(viewport) {
     mask-image: linear-gradient(
       to bottom,
       black 0,
@@ -5531,7 +5775,8 @@ fig-skeleton {
 }
 
 @supports (animation-timeline: scroll(self inline)) {
-  .fig-overflow-fade.fig-overflow-fade-horizontal {
+  .fig-overflow-fade.fig-overflow-fade-horizontal,
+  fig-toolbelt:not([layout="vertical"])::part(viewport) {
     mask-image: linear-gradient(
       to right,
       black 0,