@rogieking/figui3 2.31.2 → 2.33.0

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

@@ -62,7 +62,8 @@ 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)
 ```
 
 ## Quick Start

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));
     }
 
@@ -2740,6 +2747,8 @@ class FigInputText extends HTMLElement {
     this.type = this.getAttribute("type") || "text";
     this.placeholder = this.getAttribute("placeholder") || "";
     this.name = this.getAttribute("name") || null;
+    this.readonly =
+      this.hasAttribute("readonly") && this.getAttribute("readonly") !== "false";
 
     if (this.type === "number") {
       if (this.getAttribute("step")) {
@@ -2796,6 +2805,7 @@ class FigInputText extends HTMLElement {
       }
 
       this.input = this.querySelector("input,textarea");
+      this.input.readOnly = this.readonly;
 
       if (this.type === "number") {
         if (this.getAttribute("min")) {
@@ -2931,6 +2941,7 @@ class FigInputText extends HTMLElement {
       "placeholder",
       "label",
       "disabled",
+      "readonly",
       "type",
       "step",
       "min",
@@ -2947,6 +2958,10 @@ class FigInputText extends HTMLElement {
           this.disabled = this.input.disabled =
             newValue !== null && newValue !== "false";
           break;
+        case "readonly":
+          this.readonly = newValue !== null && newValue !== "false";
+          this.input.readOnly = this.readonly;
+          break;
         case "transform":
           if (this.type === "number") {
             this.transform = Number(newValue) || 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.31.2",
+  "version": "2.33.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",
@@ -12,8 +12,7 @@
     "./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",
@@ -21,7 +20,6 @@
     "base.css",
     "components.css",
     "index.html",
-    "propkit.html",
     "dist/",
     ".cursor/skills/",
     "README.md",
@@ -33,8 +31,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",