@rogieking/figui3 2.32.0 → 2.33.1

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

@@ -143,7 +143,7 @@ export default defineConfig({
 ### Documentation and Demos
 
 - Update `README.md` component docs when public API or behavior changes.
-- Update demo pages (`index.html` and `propkit.html` where relevant) for visible behavior changes.
+- Update demo surfaces (`index.html` and `playground/` routes where relevant) for visible behavior changes.
 - Prefer realistic examples that mirror plugin/property panel usage.
 - If introducing an experimental feature, document activation and fallback behavior clearly.
 

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

@@ -1,6 +1,6 @@
 ---
 name: propkit
-description: Guides creation and refinement of Figma-style property panel patterns ("PropKit") using FigUI3 components. Applies when building or modifying property fields in `propkit.html`, generating consistent field prompts, composing horizontal `fig-field` rows, or tuning panel UX for controls like image, color, fill, slider, switch, dropdown, segmented control, easing, and angle.
+description: Guides creation and refinement of Figma-style property panel patterns ("PropKit") using FigUI3 components. Applies when building or modifying property fields in the playground app (`/propkit` route), generating consistent field prompts, composing horizontal `fig-field` rows, or tuning panel UX for controls like image, color, fill, slider, switch, dropdown, segmented control, easing, and angle.
 user-invocable: false
 ---
 
@@ -13,7 +13,7 @@ Patterns for composing clean, production-ready Figma property panels with FigUI3
 ## Current Project Context
 
 ```json
-!`node -e "const fs=require('fs'); const ok=fs.existsSync('propkit.html'); console.log(JSON.stringify({propkit:ok, example:'horizontal fig-field + label + fig-* control'},null,2))" 2>/dev/null || echo '{"error":"context unavailable"}'`
+!`node -e "const fs=require('fs'); const ok=fs.existsSync('playground/src/main.tsx'); console.log(JSON.stringify({playground:ok, route:'/propkit', example:'horizontal fig-field + label + fig-* control'},null,2))" 2>/dev/null || echo '{"error":"context unavailable"}'`
 ```
 
 ## Principles
@@ -199,7 +199,7 @@ Use a horizontal fig-field, with a fig-slider, min=0 max=100 text=true units=%.
 - Confirm control choice matches intent (continuous vs discrete vs boolean vs exact numeric entry).
 - Verify row density and panel width feel consistent with existing PropKit sections.
 - Verify keyboard navigation and label association for every field row.
-- Verify changes in `propkit.html` still mirror recommended patterns in this skill.
+- Verify changes in `playground/src/data/sections.ts` still mirror recommended patterns in this skill.
 
 ## Quick Reference
 
@@ -218,7 +218,7 @@ Common PropKit controls:
 
 ## Primary Files
 
-- `propkit.html` - canonical PropKit examples and prompt-copy behavior
+- `playground/src/data/sections.ts` - canonical PropKit examples and prompt-copy behavior
 - `fig.js` - control behavior and emitted events
 - `components.css` - visual treatment and layout constraints
 - `README.md` - component API details and usage

package/README.md

@@ -9,7 +9,7 @@ A lightweight, zero-dependency web components library for building Figma plugin
 
 View the interactive component documentation at **[rogie.github.io/figui3](https://rogie.github.io/figui3/)**
 
-The demo page (`index.html`) is included in the npm package, so you can also open it locally after installing.
+The docs page source is kept in this repo as `old.html` for reference and local testing.
 
 ## Features
 
@@ -62,7 +62,26 @@ Or via esm.sh:
 git clone https://github.com/rogie/figui3.git
 cd figui3
 bun install
-bun dev  # Opens documentation at http://localhost:3000
+bun dev             # Core component docs at http://localhost:3000
+npm run dev:playground  # Interactive playground app (routes: /figui3, /propkit)
+npm run build:playground # Build playground app
+bun build            # Build dist/fig.js
+```
+
+### Playground (`/figui3` and `/propkit`)
+
+The playground app is the fastest way to author and validate component markup.
+
+- **`/figui3`**: component-focused examples and attribute controls for FigUI3 primitives.
+- **`/propkit`**: property-panel patterns composed from FigUI3 controls.
+- Live preview, attributes editing, and code view stay synchronized.
+- Attribute controls write real component markup and preserve internal-only playground metadata where needed.
+
+Open locally:
+
+```bash
+npm run dev:playground
+# then visit http://localhost:5173/figui3 or http://localhost:5173/propkit
 ```
 
 ## Quick Start
@@ -215,6 +234,42 @@ A modal dialog component with drag support.
 
 ---
 
+### Popup (`<fig-popup>`)
+
+An anchored floating surface built on `<dialog>`, with collision-aware positioning and optional popover beak styling.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `anchor` | string | — | CSS selector for the anchor element |
+| `position` | string | `"top center"` | Placement (`"top"`, `"left"`, `"center right"`, etc.) |
+| `offset` | string | `"0 0"` | X/Y offset in px-like tokens (`"8 8"`) |
+| `viewport-margin` | string | `"8"` | Viewport safety margin (CSS shorthand style) |
+| `variant` | string | — | Use `"popover"` to render a beak |
+| `theme` | string | — | `"light"`, `"dark"`, or `"menu"` |
+| `closedby` | string | `"any"` | Dismiss behavior: `"any"`, `"closerequest"`, `"none"` |
+| `open` | boolean/string | `false` | Open when present and not `"false"` |
+
+```html
+<fig-button id="popup-anchor" onclick="const p=document.getElementById('demo-popup'); p.toggleAttribute('open');">
+  Toggle popup
+</fig-button>
+
+<dialog
+  id="demo-popup"
+  is="fig-popup"
+  anchor="#popup-anchor"
+  position="center right"
+  offset="8 8"
+  viewport-margin="8"
+  variant="popover"
+  closedby="none"
+>
+  <fig-header><h3>Popup</h3></fig-header>
+</dialog>
+```
+
+---
+
 ### Tabs (`<fig-tabs>` / `<fig-tab>`)
 
 Tabbed navigation component.
@@ -529,6 +584,7 @@ A form field wrapper with flexible layout. Automatically links `<label>` element
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `direction` | string | `"column"` | Layout: `"column"`, `"row"`, `"horizontal"` |
+| `columns` | string | — | Optional horizontal split preset: `"thirds"` or `"half"` |
 | `label` | string | — | Programmatically set the label text |
 
 ```html
@@ -543,6 +599,12 @@ A form field wrapper with flexible layout. Automatically links `<label>` element
   <label>Volume</label>
   <fig-slider min="0" max="100" value="50"></fig-slider>
 </fig-field>
+
+<!-- Horizontal with 1/3 + 2/3 split -->
+<fig-field direction="horizontal" columns="thirds">
+  <label>Opacity</label>
+  <fig-slider value="50"></fig-slider>
+</fig-field>
 ```
 
 ---
@@ -674,16 +736,13 @@ A toast notification component.
 | `duration` | number | `5000` | Auto-dismiss ms (0 = no dismiss) |
 | `offset` | number | `16` | Distance from bottom |
 | `theme` | string | `"dark"` | Theme: `"dark"`, `"light"`, `"danger"`, `"brand"` |
-| `open` | boolean | `false` | Whether visible |
 
 ```html
+<fig-button onclick="document.getElementById('myToast').showToast()">Show toast</fig-button>
+
 <fig-toast id="myToast" theme="brand" duration="3000">
   Settings saved successfully!
 </fig-toast>
-
-<script>
-  document.getElementById('myToast').show();
-</script>
 ```
 
 ---

package/components.css

@@ -1212,8 +1212,6 @@ fig-chit {
       background-repeat: no-repeat;
       border-radius: 0.125rem;
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-    }
-    &[data-type="image"]::after {
       mask-image: linear-gradient(
         to right,
         black 0%,
@@ -2355,6 +2353,7 @@ dialog[is="fig-dialog"] {
 
 dialog[is="fig-popup"] {
   --z-index: 999999;
+  --beak-offset: 1px;
   z-index: var(--z-index);
   position: fixed;
   margin: 0;
@@ -2419,13 +2418,13 @@ dialog[is="fig-popup"] {
     }
 
     &[data-beak-side="left"]:after {
-      left: 1px;
+      left: 6px;
       top: var(--beak-offset, 50%);
       transform: translate(-100%, -50%) rotate(90deg);
     }
 
     &[data-beak-side="right"]:after {
-      left: calc(100% - 1px);
+      left: calc(100% - 6px);
       top: var(--beak-offset, 50%);
       transform: translate(0, -50%) rotate(-90deg);
     }
@@ -2894,11 +2893,36 @@ fig-field,
     gap: var(--spacer-2);
     align-items: start;
     flex-direction: row;
-    width: auto;
 
     & > label {
       min-width: 4rem;
     }
+    &[columns="thirds"] {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--spacer-2);
+
+      & > label {
+        grid-column: 1;
+      }
+
+      & > label ~ * {
+        grid-column: 2 / span 2;
+      }
+    }
+    &[columns="half"] {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--spacer-2);
+
+      & > label {
+        grid-column: 1;
+      }
+
+      & > label ~ * {
+        grid-column: 2 / span 2;
+      }
+    }
   }
 }
 
@@ -3142,7 +3166,7 @@ fig-input-angle {
 
 /* Layer */
 fig-layer {
-  --indent: var(--spacer-4);
+  --indent: var(--spacer-2);
   display: block;
   color: var(--figma-color-text);
   position: relative;
@@ -3154,14 +3178,11 @@ fig-layer {
     & > .fig-layer-row {
       & > .fig-layer-chevron {
         visibility: visible;
+        margin-left: calc(-1 * (var(--spacer-3) + var(--spacer-3) + 6px));
+        margin-right: 0;
       }
     }
   }
-  &:not(:has(fig-layer)):not(:has(.fig-layer-icon)) {
-    & > .fig-layer-row {
-      padding-left: var(--spacer-3);
-    }
-  }
 
   &:not(:has(.fig-layer-icon)) {
     & > .fig-layer-row {
@@ -3186,7 +3207,7 @@ fig-layer {
       mask-position: center;
       display: flex;
       visibility: hidden;
-      margin-left: calc(-1 * (var(--spacer-3) + var(--spacer-1) + 2px));
+      margin-left: calc(-1 * (var(--spacer-3) + var(--spacer-3)));
       margin-right: calc(-1 * (var(--spacer-1) + 2px));
       background: var(--figma-color-text-tertiary);
       width: var(--spacer-3);

package/fig.js

@@ -1813,17 +1813,24 @@ class FigPopup extends HTMLDialogElement {
 
     const anchorCenterX = anchorRect.left + anchorRect.width / 2;
     const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+    const measuredRect = this.getBoundingClientRect();
+    const rect =
+      measuredRect.width > 0 && measuredRect.height > 0 ? measuredRect : popupRect;
+    // Always use the rendered popup rect so beak alignment matches real final placement.
+    const resolvedLeft = rect.left;
+    const resolvedTop = rect.top;
+    const edgeInset = 10;
 
     let beakOffset;
     if (beakSide === "top" || beakSide === "bottom") {
-      beakOffset = anchorCenterX - left;
-      const min = 8;
-      const max = Math.max(min, popupRect.width - 8);
+      beakOffset = anchorCenterX - resolvedLeft;
+      const min = edgeInset;
+      const max = Math.max(min, rect.width - edgeInset);
       beakOffset = Math.min(max, Math.max(min, beakOffset));
     } else {
-      beakOffset = anchorCenterY - top;
-      const min = 8;
-      const max = Math.max(min, popupRect.height - 8);
+      beakOffset = anchorCenterY - resolvedTop;
+      const min = edgeInset;
+      const max = Math.max(min, rect.height - edgeInset);
       beakOffset = Math.min(max, Math.max(min, beakOffset));
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.32.0",
+  "version": "2.33.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",
@@ -12,16 +12,13 @@
     "./fig.js": "./fig.js",
     "./fig.css": "./fig.css",
     "./base.css": "./base.css",
-    "./components.css": "./components.css",
-    "./propkit.html": "./propkit.html"
+    "./components.css": "./components.css"
   },
   "files": [
     "fig.js",
     "fig.css",
     "base.css",
     "components.css",
-    "index.html",
-    "propkit.html",
     "dist/",
     ".cursor/skills/",
     "README.md",
@@ -33,8 +30,8 @@
   "scripts": {
     "dev": "bun --hot server.ts",
     "build": "bun build fig.js --minify --outdir dist",
-    "dev:propkit": "cd propkit && npm run dev",
-    "build:propkit": "cd propkit && npm run build"
+    "dev:playground": "cd playground && npm run dev",
+    "build:playground": "cd playground && npm run build"
   },
   "repository": {
     "type": "git",