@rogieking/figui3 6.25.0 → 6.27.0

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

@@ -87,6 +87,8 @@ export default defineConfig({
 - Preserve value shape expectations:
   - `fig-input-color` expects solid color data (`detail.color`, optional `detail.alpha`) from the picker.
   - `fig-fill-picker` custom modes use JSON with `type` set to mode name and remaining data in payload.
+- Direct color events expose additive `{ color, alpha, opacity }` aliases: opaque `#RRGGBB`, `0–1`, and `0–100`, respectively.
+- Keep `fig-input-color`'s legacy `value`, `hex`, and `rgba` event-detail fields unchanged; consume the aliases for a shared contract.
 
 ## Critical Rules
 
@@ -180,7 +182,7 @@ attributeChangedCallback(name, oldValue, newValue) {
 ```txt
 Event contract quick map:
 - fig-slider: input/change -> current value on e.target.value
-- fig-input-color: input/change -> value on e.target.value, structured color via e.detail (when available)
+- fig-input-color: input/change -> legacy value/hex/rgba plus color/alpha/opacity aliases in e.detail
 - fig-input-fill / fig-fill-picker: input/change -> fill payload in e.detail
 ```
 

package/.cursor/skills/propkit/SKILL.md

@@ -113,6 +113,8 @@ bootstrap();
   - Default variant for most property panels.
   - `variant="classic"` only when the previous slider appearance is needed.
 - Always set explicit `min`, `max`, and `step` (and `units` where applicable) to keep behavior predictable.
+- Set `default` on PropsKit value controls when reset behavior should differ from the initial value.
+- PropsKit value controls support `resetToDefault()` and a right-click **Reset** menu; `propskit-slider` also supports double-click reset.
 
 ### Control Selection Heuristics
 

package/README.md

@@ -306,15 +306,22 @@ Composes a `<fig-field>` and `<fig-input-number>` into a full-surface property c
 
 PropsKit controls that support `size` default to the large layout when the attribute is omitted.
 
+All PropsKit inputs expose `defaultValue`, `isDefault`, and `resetToDefault()`. A
+`propskit-group` uses this shared contract to track its `dirty` state and reset
+each nested input to its own current `default`.
+
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
 | `direction` | string | `"horizontal"` | Field layout direction |
 | `size` | string | `"large"` | Control layout size |
+| `default` | number/string | initial `value` | Right-click reset target |
 | *number attrs* | — | — | All `<fig-input-number>` attributes are forwarded |
 
 **Events:** `input`, `change` — forwarded from the inner number input.
 
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` (falling back to the initial value).
+
 ```html
 <propskit-number label="Width" value="24" min="0" max="100" units="px"></propskit-number>
 ```
@@ -327,10 +334,12 @@ PropsKit controls that support `size` default to the large layout when the attri
 
 Composes a `<fig-field>` and `<fig-input-color>` into a full-surface property control. Color attributes are forwarded to the inner input and text editing remains enabled.
 
-**Attributes:** `label`, `value`, `alpha`, `disabled`, `size`
+**Attributes:** `label`, `value`, `default`, `alpha`, `disabled`, `size`
 
 **Events:** `input`, `change` — forwarded from the inner color input.
 
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial color.
+
 ```html
 <propskit-color label="Fill" value="#0D99FF" alpha="true"></propskit-color>
 ```
@@ -343,10 +352,12 @@ Composes a `<fig-field>` and `<fig-input-color>` into a full-surface property co
 
 Composes a `<fig-field>` and an Off/On `<fig-segmented-control>` into a full-surface boolean property control.
 
-**Attributes:** `label`, `checked`, `disabled`, `name`, `value`, `size`
+**Attributes:** `label`, `checked`, `default`, `disabled`, `name`, `value`, `size`
 
 **Events:** `input`, `change` — forwarded from the inner switch.
 
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore the default checked state.
+
 ```html
 <propskit-switch label="Visible" checked></propskit-switch>
 ```
@@ -359,10 +370,12 @@ Composes a `<fig-field>` and an Off/On `<fig-segmented-control>` into a full-sur
 
 Composes a `<fig-field>` and `<fig-select>` into a full-surface property control. Options come from the `options` attribute (same formats as `fig-options`: comma-separated, newline-delimited, or a JSON array).
 
-**Attributes:** `label`, `value`, `options`, `disabled`, `size`
+**Attributes:** `label`, `value`, `default`, `options`, `disabled`, `size`
 
 **Events:** `input`, `change` — forwarded from the inner select.
 
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial selection.
+
 ```html
 <propskit-select label="Alignment" value="Center" options="Left,Center,Right"></propskit-select>
 ```
@@ -375,10 +388,12 @@ Composes a `<fig-field>` and `<fig-select>` into a full-surface property control
 
 Composes a `<fig-field>` and `<fig-input-text>` into a full-surface, single-line property control. Text input attributes and adornment slots are forwarded to the inner control.
 
-**Attributes:** `label`, `value`, `placeholder`, `type`, `disabled`, `readonly`, `autoresize`, `size`
+**Attributes:** `label`, `value`, `default`, `placeholder`, `type`, `disabled`, `readonly`, `autoresize`, `size`
 
 **Events:** `input`, `change` — forwarded from the inner text input.
 
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial text.
+
 ```html
 <propskit-text label="Name" value="Layer 1" placeholder="Enter a name"></propskit-text>
 ```
@@ -396,11 +411,12 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
 | `label` | string | — | Field label text |
 | `direction` | string | `"column"` | Layout direction |
 | `size` | string | `"large"` | Control layout size |
+| `default` | number/string | initial `value` | Double-click and right-click reset target |
 | *slider attrs* | — | — | All `<fig-slider>` attributes except host-only PropsKit attributes are forwarded |
 
 **Events:** `input`, `change` — forwarded from the inner slider.
 
-Double-click or right-click and choose "Reset to default" to reset to the `default` value, falling back to the slider minimum.
+Double-click or right-click and choose **Reset** to restore `default`, falling back to the initial value.
 
 **Methods:** `resetToDefault()` triggers the same reset behavior.
 
@@ -494,6 +510,7 @@ Waveform oscillator input with composable wave functions, live SVG waveform prev
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | JSON string | — | `{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0}]}` |
+| `default` | JSON string | initial `value` | Right-click reset target |
 | `precision` | number | `2` | Decimal places |
 | `aspect-ratio` | string | `"2 / 1"` | Editor aspect ratio |
 | `edit` | boolean | `true` | Show editor and number fields; set to `"false"` for preview only |
@@ -503,6 +520,8 @@ Supported `type` values: `"sine"`, `"square"`, `"sawtooth"`, `"triangle"`.
 
 **Properties:** `value` returns a normalized JSON string. `data` returns `{ waves }`. Single-wave JSON values are still accepted and normalized into `waves`.
 
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore the oscillator value.
+
 **Events:**
 
 | Event | Detail |
@@ -559,8 +578,8 @@ A compact solid-color swatch. Uses `<fig-fill-picker>` when the optional picker
 
 | Event | Detail |
 |---|---|
-| `input` | `{ color, opacity? }` — while editing |
-| `change` | `{ color, opacity? }` — on commit |
+| `input` | `{ color, alpha, opacity }` — while editing |
+| `change` | `{ color, alpha, opacity }` — on commit |
 | `add` | — (when `control="add"` is clicked) |
 | `remove` | — (when `control="remove"` is clicked) |
 
@@ -588,8 +607,10 @@ A compact solid-color swatch. Uses `<fig-fill-picker>` when the optional picker
 
 | Event | Detail |
 |---|---|
-| `input` | `{ color, alpha, hsv: { h, s, v, a } }` |
-| `change` | `{ color, alpha, hsv: { h, s, v, a } }` |
+| `input` | `{ value, hex, rgba, color, alpha, opacity }` |
+| `change` | `{ value, hex, rgba, color, alpha, opacity }` |
+
+`value`, `hex`, and `rgba` retain their legacy values. The additive aliases use opaque `#RRGGBB` for `color`, `0–1` for `alpha`, and `0–100` for `opacity`.
 
 ```html
 <fig-input-color value="#FF5733" text="true"></fig-input-color>
@@ -959,8 +980,8 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 |---|---|
 | `input` | `{ x, y, px, py, shiftKey }` — while dragging |
 | `change` | `{ x, y, px, py }` — on release |
-| `input` | `{ color, opacity }` — while editing a `type="color"` handle |
-| `change` | `{ color, opacity }` — when committing a `type="color"` handle |
+| `input` | `{ color, alpha, opacity }` — while editing a `type="color"` handle |
+| `change` | `{ color, alpha, opacity }` — when committing a `type="color"` handle |
 | `add` | — (when `tip="add"`) |
 | `remove` | — (when `tip="remove"`) |
 | `hitareadown` | `{ originalEvent }` — when `hit-area-mode="delegate"` and the hit area is clicked |
@@ -1008,6 +1029,8 @@ A composite point control with optional radius circle, angle handle, or second p
 | `input` | Value object (shape depends on type) — while dragging |
 | `change` | Value object (shape depends on type) — on release |
 
+For `type="color"`, color edits add `{ color, alpha, opacity }` to the positional value object.
+
 For `point-point`, both handles support direct drag (with a dynamic directional resize cursor) and rotation via their hit area (dragging from the hit area rotates around the opposite handle at fixed distance, with a rotate cursor).
 
 ```html
@@ -1255,6 +1278,8 @@ A thin styled layer for arbitrary visual content. Use it for generated previews,
 | `full` | boolean | `false` | Stretch to the available width |
 | `checkerboard` | boolean | `false` | Show checkerboard behind transparent content |
 
+Set `--fig-preview-background` to customize the surface color, including `transparent` to remove it.
+
 ```html
 <fig-preview full style="height: 96px">
   <canvas width="320" height="180"></canvas>
@@ -1345,7 +1370,7 @@ Use `slot="overlay"` for custom overlay controls. Slotted overlays stay as direc
 
 `<fig-card>` — [demo](https://rog.ie/figui3/#card)
 
-A media card with a truncated label, optional link, and attribute-only selection chrome. Composes a generated `fig-image` (or an authored `fig-image` / `fig-media` / `fig-preview` child).
+A media card with a truncated label, optional link, and attribute-only selection chrome. With `src`, it composes a generated `fig-image`. Without `src`, authored children stay in place and only generated label content is added.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -1368,8 +1393,13 @@ A media card with a truncated label, optional link, and attribute-only selection
 <fig-card src="photo.jpg" label="Shader pill" sublabel="Generative tools/effects" selected></fig-card>
 <fig-card src="photo.jpg" label="Open asset" href="#asset"></fig-card>
 <fig-card src="photo.jpg" label="Wide card" aspect-ratio="16/9" full></fig-card>
+<fig-card label="Custom preview">
+  <fig-preview>...</fig-preview>
+</fig-card>
 ```
 
+When `src` is omitted, authored direct children such as `fig-image`, `fig-media`, or `fig-preview` remain direct children of the card.
+
 Place cards in a CSS grid for multi-column layouts — there is no built-in columns attribute. Prefer `full` in fluid layouts for consistency with other FigUI controls.
 
 ---

package/components.css

@@ -1153,7 +1153,8 @@ fig-tabs,
 .tabs {
   --fig-overflow-size: calc(var(--spacer-4) + var(--spacer-2));
   --fig-tabs-inline-padding: 0;
-  --fig-tabs-inline-margin: var(--spacer-2-5);
+  --fig-tabs-margin-left: var(--spacer-1);
+  --fig-tabs-margin-right: var(--spacer-2);
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -1161,11 +1162,14 @@ fig-tabs,
   gap: var(--spacer-1);
   min-width: 0;
   overflow: auto hidden;
-  padding: var(--spacer-2) var(--fig-tabs-inline-padding);
-  margin: 0 var(--fig-tabs-inline-margin);
+  padding: var(--spacer-2) 0;
+  padding-inline: var(--fig-tabs-inline-padding);
+  margin: 0;
+  margin-left: var(--fig-tabs-margin-left);
+  margin-right: var(--fig-tabs-margin-right);
   position: relative;
   scrollbar-width: none;
-  width: calc(100% - var(--fig-tabs-inline-margin) * 2);
+  width: calc(100% - var(--fig-tabs-margin-left) - var(--fig-tabs-margin-right));
 
   > fig-tab {
     flex-shrink: 0;
@@ -1562,6 +1566,10 @@ fig-video {
     width: 100%;
   }
 
+  &[aspect-ratio] {
+    width: 100%;
+  }
+
   > fig-preview {
     --fig-preview-fit: var(--fig-media-fit);
     width: 100%;
@@ -3165,12 +3173,13 @@ fig-tooltip {
 
 fig-preview {
   --fig-preview-fit: contain;
+  --fig-preview-background: var(--figma-color-bg-secondary);
 
   display: block;
   place-items: center;
   min-width: 0;
   max-width: 100%;
-  background-color: var(--figma-color-bg-secondary);
+  background-color: var(--fig-preview-background);
   border-radius: var(--radius-medium);
   position: relative;
   overflow: hidden;
@@ -4992,7 +5001,9 @@ fig-chooser {
 fig-card {
   --fig-card-label-line-clamp: 1;
   --fig-card-media-radius: var(--radius-medium);
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-1);
   width: 100%;
   min-width: 0;
 
@@ -5000,6 +5011,12 @@ fig-card {
     width: 100%;
   }
 
+  &:is(:not([src]), [src=""]) {
+    padding: var(--spacer-1);
+    border-radius: 0.5625rem;
+    box-sizing: border-box;
+  }
+
   .fig-card-link {
     display: flex;
     flex-direction: column;
@@ -5019,17 +5036,12 @@ fig-card {
     outline-offset: var(--figma-focus-outline-offset);
   }
 
-  .fig-card-media {
-    position: relative;
-    border-radius: var(--fig-card-media-radius);
-    background: var(--figma-color-bg-secondary);
-    overflow: hidden;
-    min-width: 0;
-  }
-
-  .fig-card-media > fig-image,
-  .fig-card-media > fig-media,
-  .fig-card-media > fig-preview {
+  .fig-card-link > fig-image,
+  .fig-card-link > fig-media,
+  .fig-card-link > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-image,
+  &:is(:not([src]), [src=""]) > fig-media,
+  &:is(:not([src]), [src=""]) > fig-preview {
     display: block;
     width: 100%;
     max-width: none;
@@ -5037,9 +5049,12 @@ fig-card {
     border-radius: var(--fig-card-media-radius);
   }
 
-  .fig-card-media > fig-image > fig-preview,
-  .fig-card-media > fig-media > fig-preview,
-  .fig-card-media > fig-preview {
+  .fig-card-link > fig-image > fig-preview,
+  .fig-card-link > fig-media > fig-preview,
+  .fig-card-link > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-image > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-media > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-preview {
     width: 100%;
     max-width: none;
     border-radius: var(--fig-card-media-radius);
@@ -5092,24 +5107,39 @@ fig-card {
   &:hover:not([selected]:not([selected="false"])):not(
       [disabled]:not([disabled="false"])
     ):not([aria-disabled="true"])
-    .fig-card-link {
+    .fig-card-link,
+  &:is(:not([src]), [src=""]):hover:not(
+      [selected]:not([selected="false"])
+    ):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {
     background: var(--figma-color-bg-secondary);
   }
 
-  &[selected]:not([selected="false"]) .fig-card-link {
+  &[selected]:not([selected="false"]) .fig-card-link,
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"]) {
     background: var(--figma-color-bg-selected);
   }
 
-  &[selected]:not([selected="false"]) .fig-card-media {
+  &[selected]:not([selected="false"])
+    .fig-card-link
+    > :is(fig-image, fig-media, fig-preview),
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
+    > :is(fig-image, fig-media, fig-preview) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
 
   &[selected]:not([selected="false"])
-    .fig-card-media
+    .fig-card-link
+    > :is(fig-image, fig-media)
+    > fig-preview::after,
+  &[selected]:not([selected="false"])
+    .fig-card-link
+    > fig-preview::after,
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
     > :is(fig-image, fig-media)
     > fig-preview::after,
-  &[selected]:not([selected="false"]) .fig-card-media > fig-preview::after {
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
+    > fig-preview::after {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }