figma-plugin-utilities 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -0,0 +1,62 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.3.1] - 2026-05-13
+
+### Added
+- ESLint configuration with TypeScript and Svelte support for code linting
+- Prettier setup with Svelte plugin for consistent code formatting
+- `lint` and `prettier` npm scripts for development workflow
+
+### Changed
+- Updated **ListItem** and **StatusBar** to use icon imports from `figma-ui3-kit-svelte/icons` after the UI kit icon export restructure.
+
+## [0.3.0] - 2026-05-06
+
+WCAG 2.2 AA accessibility audit and remediation across all components.
+
+### Added
+- `class` prop passthrough to **ListItem**, **LoadingState**, and **StatusBar** — consistent with other components
+- `role="alert"` for error/warning and `role="status"` for info/success on **StatusBar** — messages are now announced by screen readers on insertion
+- `"AAA-large"` case (4.5:1) to `meetsContrastLevel` in `lib/colors.js` — covers WCAG 1.4.6 large text at AAA level
+- GitHub Actions publish workflow (`.github/workflows/publish.yml`) — triggers `npm publish` on GitHub release creation
+- `aria-pressed={active}` to **ListItem** — communicates selection state to assistive technology
+- Space key activation to **ListItem** — keyboard users can now toggle items with Space as well as Enter
+- `ariaLabel="{title} options"` to the **ListItem** menu `IconButton` — gives the icon-only button an accessible name
+- `role="status"` to **LoadingState** — loading message is announced as a polite live region
+- `aria-hidden="true"` to the decorative icon in **EmptyState** — prevents redundant AT announcement
+- `aria-disabled` attribute to **CheckboxCard** — reflects disabled state without removing from the accessibility tree
+- Dev-mode `console.warn` to **FieldGroup** when `label` is provided but `labelFor` is empty
+
+### Changed
+- **Header**: outer element changed from `<div>` to `<header>`; title changed from `<h2>` to `<h1>` (plugin UI runs in its own iframe, so the heading hierarchy starts fresh)
+- **Footer**: outer element changed from `<div>` to `<footer>`
+- **CheckboxCard**: removed `role="button"` and `tabindex` from the wrapper div — the native checkbox input is the sole interactive/focusable element; the wrapper remains clickable for mouse users via a delegating click handler
+- **CheckboxCard**: added `user-select: none` to prevent text selection on double-click
+
+## [0.1.0] - 2026-04-17
+
+Initial release as `figma-plugin-utilities`.
+
+### Added
+- **PluginLayout** — main content wrapper with scrollable area
+- **Header** — header bar with left/center/right slots and optional title
+- **Footer** — footer bar with right, split, and full layout variants
+- **StatusBar** — toast-style notifications with auto-dismiss for info/success types
+- **EmptyState** — empty/error state display with optional icon and action buttons
+- **ListItem** — selectable list item with metadata slot and context menu
+- **LoadingState** — centered loading indicator
+- **FieldGroup** — label + input wrapper for form fields
+- **CheckboxCard** — large-target checkbox with card styling
+- `lib/messages.js` — `sendToPlugin` and `createMessageHandler`
+- `lib/colors.js` — `rgbToHex`, `hexToRgb`, `getLuminance`, `getContrastRatio`, `meetsContrastLevel`
+- `lib/validation.js` — `validateUrl`, `validateJsonString`, `validateEmail`, `validateNumber`, `sanitizeName`, `sanitizeInput`, `isEmpty`
+- `lib/errorHandling.js` — `safeAsync`, `parseJsonSafe`, `notifyError`, `notifySuccess`, `notifyWarning`, and more
+- `lib/resize.js` — `resizeToFit`, `autoResize`, `setDefaultWidth`, `getContentHeight`
+- `lib/figma-helpers.ts` — `sendToUI`, `showError`, `showSuccess`, `getCollections`, `getVariables`, `getSelection`, `focusNodes`, `loadFont`, `saveToStorage`, `loadFromStorage`, `handleResize`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Marius Roosendaal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -5,7 +5,7 @@ Shared Svelte components and utilities for Figma plugins.
 ## Installation
 
 ```bash
-npm install figma-plugin-ulities
+npm install figma-plugin-utilities
 ```
 
 ## Usage
@@ -24,25 +24,45 @@ import {
   LoadingState,
   FieldGroup,
   CheckboxCard,
-  // Utilities
+  // Messages
   sendToPlugin,
   createMessageHandler,
+  // Colors
   rgbToHex,
   hexToRgb,
+  getLuminance,
+  getContrastRatio,
+  meetsContrastLevel,
+  // Validation
   validateUrl,
   validateJsonString,
+  validateEmail,
+  validateNumber,
   sanitizeName,
-} from "figma-plugin-utils";
+  sanitizeInput,
+  isEmpty,
+  // Error handling
+  safeAsync,
+  parseJsonSafe,
+  notifyError,
+  notifySuccess,
+  notifyWarning,
+  // Resize
+  setDefaultWidth,
+  getContentHeight,
+  resizeToFit,
+  autoResize,
+} from "figma-plugin-utilities";
 ```
 
 ### Import Specific Modules
 
 ```javascript
 // Components only
-import { PluginLayout, Header, Footer } from "figma-plugin-utils/components";
+import { PluginLayout, Header, Footer } from "figma-plugin-utilities/components";
 
 // Utilities only
-import { sendToPlugin, createMessageHandler } from "figma-plugin-utils/lib";
+import { sendToPlugin, createMessageHandler } from "figma-plugin-utilities/lib";
 ```
 
 ## Components
@@ -144,7 +164,7 @@ Types: `info`, `success`, `error`, `warning`. Auto-dismisses after 4s for `info`
 
 ### CheckboxCard
 
-Large checkbox with card-style background and better touch targets. 
+Large checkbox with card-style background and better touch targets.
 
 ```svelte
 <!-- Basic usage -->
@@ -195,7 +215,8 @@ window.onmessage = createMessageHandler({
 const rgb = hexToRgb("#FF0000"); // { r: 1, g: 0, b: 0 }
 const hex = rgbToHex({ r: 1, g: 0, b: 0 }); // "#FF0000"
 
-// Calculate contrast
+// Contrast utilities
+const luminance = getLuminance({ r: 1, g: 0, b: 0 });
 const ratio = getContrastRatio(color1, color2);
 const passes = meetsContrastLevel(ratio, "AA"); // true/false
 ```
@@ -209,7 +230,12 @@ const urlResult = validateUrl("https://example.com");
 const jsonResult = validateJsonString('{"key": "value"}');
 // { valid: true, parsed: {...} } or { valid: false, error: "..." }
 
+validateEmail("user@example.com"); // { valid: true }
+validateNumber("42", { min: 0, max: 100 }); // { valid: true, value: 42 }
+
 const clean = sanitizeName("My Plugin!!!"); // "My Plugin"
+sanitizeInput("<script>alert(1)</script>"); // escaped string
+isEmpty(""); // true
 ```
 
 ### Error Handling (`lib/errorHandling.js`)
@@ -229,20 +255,71 @@ if (result.ok) {
 // Parse JSON safely
 const parsed = parseJsonSafe(jsonString);
 // { ok: true, value: {...} } or { ok: false, error: "..." }
+
+// Figma notifications
+notifySuccess("Done!");
+notifyError("Something went wrong");
+notifyWarning("Check your input");
 ```
 
+### Resize (`lib/resize.js`)
+
+Utilities for dynamically resizing the plugin window to fit its content.
+
+```javascript
+// One-time resize to fit content
+resizeToFit({ width: 300, minHeight: 100, maxHeight: 600 });
+
+// Watch for content changes and auto-resize
+const cleanup = autoResize({
+  container: myContainerEl, // bind:this on a naturally-flowing wrapper
+  width: 300,
+  minHeight: 100,
+  maxHeight: 600,
+});
+
+// Call cleanup when the component is destroyed
+onDestroy(cleanup);
+
+// Set default width used across all resize calls
+setDefaultWidth(320);
+```
+
+> **Note:** The `container` element passed to `autoResize` must **not** have `height: 100%` or a fixed height — it should flow naturally with its content so `scrollHeight` can be measured accurately.
+
 ### Figma Helpers (`lib/figma-helpers.ts`)
 
 For use in `code.ts`:
 
 ```typescript
-import { sendToUI, showError, focusNodes, loadFont } from "figma-plugin-utils/lib/figma-helpers";
+import {
+  sendToUI,
+  showError,
+  showSuccess,
+  getCollections,
+  getVariables,
+  getSelection,
+  focusNodes,
+  loadFont,
+  saveToStorage,
+  loadFromStorage,
+  handleResize,
+} from "figma-plugin-utilities/lib/figma-helpers";
 
 // Send message to UI
 sendToUI("success", { message: "Done!" });
 
-// Show notification
+// Show notifications
 showError("Something went wrong");
+showSuccess("Created!");
+
+// Variables
+const collections = await getCollections();
+const colorVars = await getVariables("COLOR");
+
+// Selection
+const selected = getSelection(); // all selected nodes
+const frames = getSelection("FRAME"); // filtered by type
 
 // Focus viewport on nodes
 focusNodes(figma.currentPage.selection);
@@ -253,4 +330,7 @@ await loadFont("Inter", "Regular");
 // Client storage
 await saveToStorage("settings", { theme: "dark" });
 const settings = await loadFromStorage("settings", { theme: "light" });
+
+// Handle resize message from UI (call in your message handler)
+if (msg.type === "resize") handleResize(msg);
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-plugin-utilities",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Shared Svelte components and utilities for Figma plugins",
   "type": "module",
   "svelte": "./src/index.js",
@@ -30,7 +30,12 @@
       "default": "./src/lib/figma-helpers.ts"
     }
   },
-  "files": ["src"],
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mariusroosendaal/figma-plugin-utilities.git"
@@ -49,8 +54,25 @@
   ],
   "author": "Marius Roosendaal",
   "license": "MIT",
-  "dependencies": {
-    "figma-ui3-kit-svelte": "file:../figma-ui3-kit-svelte",
-    "svelte": "^4.2.20"
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@figma/plugin-typings": "^1.51.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@types/node": "^22.13.4",
+    "eslint": "^9.39.1",
+    "eslint-plugin-svelte": "^2.46.0",
+    "figma-ui3-kit-svelte": "file:..//_packages/figma-ui3-kit-svelte",
+    "globals": "^16.5.0",
+    "prettier": "3.7.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "^4.2.20",
+    "svelte-eslint-parser": "^0.39.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^5.2.0"
+  },
+  "scripts": {
+    "lint": "tsc --noEmit && eslint . --ext .ts,.js,.svelte && npx prettier --check \"src/**/*.{js,ts,svelte,html,css}\"",
+    "prettier": "npx prettier --write \"src/**/*.{js,ts,svelte,html,css}\""
   }
 }

package/src/components/CheckboxCard.svelte

@@ -32,34 +32,32 @@
   /** Whether checkbox is disabled */
   export let disabled = false;
 
-  function handleCardClick(e) {
+  let cardEl;
+
+  function handleChange(e) {
     if (disabled) return;
-    
-    // Don't toggle if clicking directly on the checkbox or label
-    // (let the checkbox handle it natively)
-    const target = e.target;
-    const isCheckboxOrLabel = 
-      target.tagName === "INPUT" || 
-      target.tagName === "LABEL" ||
-      target.closest("label");
-    
-    if (isCheckboxOrLabel) return;
-    
-    // Toggle and dispatch change event
-    checked = !checked;
+    checked = e.target.checked;
     dispatch("change", { checked });
   }
+
+  function handleCardClick(e) {
+    if (disabled) return;
+    // Clicks inside the Checkbox component (label/input) are handled natively
+    if (e.target.closest(".checkbox-container")) return;
+    cardEl?.querySelector('input[type="checkbox"]')?.click();
+  }
 </script>
 
-<div 
-  class="checkbox-card" 
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<!-- Keyboard users interact with the native checkbox input inside; this div is a mouse-only larger click target -->
+<div
+  class="checkbox-card"
   class:disabled
+  aria-disabled={disabled || undefined}
+  bind:this={cardEl}
   on:click={handleCardClick}
-  on:keydown={(e) => e.key === "Enter" && handleCardClick(e)}
-  role="button"
-  tabindex={disabled ? -1 : 0}
 >
-  <Checkbox {checked} {disabled} on:change>
+  <Checkbox {checked} {disabled} on:change={handleChange}>
     <slot />
   </Checkbox>
   {#if $$slots.secondary}
@@ -80,6 +78,7 @@
     border-radius: var(--border-radius-medium);
     cursor: pointer;
     min-height: 24px;
+    user-select: none;
   }
 
   .checkbox-card:hover {

package/src/components/EmptyState.svelte

@@ -30,9 +30,12 @@
   /** Whether to center vertically */
   export let centered = true;
 
-  let className = '';
+  /** ARIA role: "status" for info messages, "alert" for errors */
+  export let role = "status";
+
+  let className = "";
   export { className as class };
-  // Normalize actions
+
   $: normalizedActions = actions ? actions : action ? [action] : null;
 </script>
 
@@ -41,9 +44,10 @@
   class:centered
   class:small={size === "small"}
   class:large={size === "large"}
+  {role}
 >
   {#if icon}
-    <div class="empty-state__icon">
+    <div class="empty-state__icon" aria-hidden="true">
       {#if typeof icon === "string"}
         <Icon iconName={icon} />
       {:else}

package/src/components/FieldGroup.svelte

@@ -1,20 +1,10 @@
 <script>
   import { Label } from "figma-ui3-kit-svelte";
 
-  /**
-   * Field group wrapper
-   * Wraps a form field with an optional label
-   *
-   * @example
-   * <FieldGroup label="Collection">
-   *   <Dropdown menuItems={options} bind:value={selected} />
-   * </FieldGroup>
-   */
-
   /** Label text (optional) */
   export let label = "";
 
-  /** For attribute for the label (optional) */
+  /** id of the associated control (optional) */
   export let labelFor = "";
 
   /** Size of the label (optional) */

package/src/components/Footer.svelte

@@ -31,7 +31,7 @@
   export let className = "";
 </script>
 
-<div class="footer footer--{variant} {className}">
+<footer class="footer footer--{variant} {className}">
   {#if variant === "right"}
     <div class="footer__right">
       <slot />
@@ -46,7 +46,7 @@
   {:else if variant === "full"}
     <slot />
   {/if}
-</div>
+</footer>
 
 <style>
   .footer {
@@ -103,6 +103,10 @@
     width: 100%;
   }
 
+  .footer--full :global(> *) {
+    flex: 1;
+  }
+
   .footer--full :global(button) {
     flex: 1;
     width: 100%;

package/src/components/Header.svelte

@@ -11,7 +11,7 @@
   export let noBorder = false;
 </script>
 
-<div
+<header
   class="header {className}"
   class:has-left-content={$$slots.left}
   class:no-border={noBorder}
@@ -19,7 +19,7 @@
   <div class="header__left">
     <slot name="left" />
     {#if title}
-      <h2 class="header__title">{title}</h2>
+      <h1 class="header__title">{title}</h1>
     {/if}
   </div>
   <div class="header__center">
@@ -28,7 +28,7 @@
   <div class="header__right">
     <slot name="right" />
   </div>
-</div>
+</header>
 
 <style>
   .header {

package/src/components/ListItem.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import { IconButton, IconMore, Menu } from "figma-ui3-kit-svelte";
+  import { IconButton, Menu } from "figma-ui3-kit-svelte";
+  import { IconMore } from "figma-ui3-kit-svelte/icons";
 
   /**
    * List item with optional action menu
@@ -44,6 +45,9 @@
   /** Whether to show badge slot */
   export let hasBadge = false;
 
+  let className = "";
+  export { className as class };
+
   function handleClick() {
     dispatch("click", { id });
   }
@@ -65,14 +69,20 @@
   }
 </script>
 
-<div class="list-item-wrapper">
+<div class="list-item-wrapper {className}">
   <div
     class="list-item"
     class:active
     on:click={handleClick}
-    on:keydown={(e) => e.key === "Enter" && handleClick()}
+    on:keydown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick();
+      }
+    }}
     role="button"
     tabindex="0"
+    aria-pressed={active}
   >
     <div class="list-item__content">
       <div class="list-item__title">{title}</div>
@@ -92,6 +102,7 @@
   {#if menuItems.length > 0}
     <IconButton
       iconName={IconMore}
+      ariaLabel="{title} options"
       bind:element={menuButtonElement}
       on:click={handleMenuToggle}
     />

package/src/components/LoadingState.svelte

@@ -15,10 +15,15 @@
 
   /** Message to display */
   export let message = "Loading...";
+
+  let className = "";
+  export { className as class };
 </script>
 
-<div class="loading-state">
-  <Text variant="body-medium" color="--figma-color-text-secondary">{message}</Text>
+<div class="loading-state {className}" role="status">
+  <Text variant="body-medium" color="--figma-color-text-secondary"
+    >{message}</Text
+  >
 </div>
 
 <style>

package/src/components/PluginLayout.svelte

@@ -6,9 +6,7 @@
    * @example
    * <PluginLayout>
    *   <p>Main content here</p>
-   *   <svelte:fragment slot="footer">
-   *     <Button variant="primary">Create item</Button>
-   *   </svelte:fragment>
+   *   <Button variant="primary">Create item</Button>
    * </PluginLayout>
    */
 
@@ -40,4 +38,8 @@
     overflow-y: auto;
     padding: var(--size-xsmall);
   }
+
+  .plugin-footer {
+    flex-shrink: 0;
+  }
 </style>

package/src/components/StatusBar.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onDestroy, createEventDispatcher } from "svelte";
-  import { IconButton, IconClose } from "figma-ui3-kit-svelte";
+  import { IconButton } from "figma-ui3-kit-svelte";
+  import { IconClose } from "figma-ui3-kit-svelte/icons";
 
   // Status bar for notifications with auto-dismiss
   // Supports types: 'info', 'success', 'error', 'warning'
@@ -14,6 +15,9 @@
   /** Status type: 'info', 'success', 'error', 'warning' */
   export let type = "info";
 
+  let className = "";
+  export { className as class };
+
   let visible = false;
   let timeoutId;
 
@@ -53,14 +57,16 @@
 
 {#if visible && message}
   <div
-    class="status-bar"
+    class="status-bar {className}"
     class:status-bar--error={type === "error"}
     class:status-bar--success={type === "success"}
     class:status-bar--warning={type === "warning"}
+    role={type === "error" || type === "warning" ? "alert" : "status"}
   >
     <span>{message}</span>
     <IconButton
       iconName={IconClose}
+      ariaLabel="Dismiss"
       on:click={handleClose}
       iconColor={computedIconColor}
     />

package/src/index.js

@@ -38,6 +38,9 @@ export {
   withErrorHandling,
   safeAsync,
   parseJsonSafe,
+  notifyError,
+  notifySuccess,
+  notifyWarning,
   // Resize
   setDefaultWidth,
   getContentHeight,

package/src/lib/colors.js

@@ -39,7 +39,8 @@ export function hexToRgb(hex) {
  * @returns {number} Relative luminance (0-1)
  */
 export function getLuminance({ r, g, b }) {
-  const adjust = (c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const adjust = (c) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
   return 0.2126 * adjust(r) + 0.7152 * adjust(g) + 0.0722 * adjust(b);
 }
 
@@ -60,13 +61,15 @@ export function getContrastRatio(color1, color2) {
 /**
  * Check if contrast ratio meets WCAG level
  * @param {number} ratio - Contrast ratio
- * @param {"AA" | "AAA" | "AA-large"} level - WCAG level to check
+ * @param {"AA" | "AAA" | "AA-large" | "AAA-large"} level - WCAG level to check
  * @returns {boolean} Whether the ratio meets the level
  */
 export function meetsContrastLevel(ratio, level) {
   switch (level) {
     case "AAA":
       return ratio >= 7;
+    case "AAA-large":
+      return ratio >= 4.5;
     case "AA":
       return ratio >= 4.5;
     case "AA-large":

package/src/lib/figma-helpers.ts

@@ -9,7 +9,7 @@
  */
 export function sendToUI<T extends Record<string, unknown>>(
   type: string,
-  data?: T
+  data?: T,
 ): void {
   if (data) {
     figma.ui.postMessage({ type, ...data });
@@ -32,7 +32,7 @@ export async function getCollections(): Promise<VariableCollection[]> {
  * @returns Promise resolving to array of variables
  */
 export async function getVariables(
-  type?: VariableResolvedDataType
+  type?: VariableResolvedDataType,
 ): Promise<Variable[]> {
   return figma.variables.getLocalVariablesAsync(type);
 }
@@ -61,7 +61,7 @@ export function showSuccess(message: string, timeout = 3000): void {
  * @returns Array of selected nodes
  */
 export function getSelection<T extends SceneNode>(
-  nodeType?: NodeType
+  nodeType?: NodeType,
 ): readonly T[] {
   const selection = figma.currentPage.selection;
   if (nodeType) {
@@ -85,10 +85,7 @@ export function focusNodes(nodes: readonly SceneNode[]): void {
  * @param family - Font family name
  * @param style - Font style (e.g., "Regular", "Bold")
  */
-export async function loadFont(
-  family: string,
-  style: string
-): Promise<void> {
+export async function loadFont(family: string, style: string): Promise<void> {
   await figma.loadFontAsync({ family, style });
 }
 
@@ -109,7 +106,7 @@ export async function saveToStorage<T>(key: string, value: T): Promise<void> {
  */
 export async function loadFromStorage<T>(
   key: string,
-  defaultValue?: T
+  defaultValue?: T,
 ): Promise<T | undefined> {
   try {
     const value = await figma.clientStorage.getAsync(key);

package/src/lib/index.js

@@ -1,8 +1,5 @@
 // Message utilities
-export {
-  sendToPlugin,
-  createMessageHandler,
-} from "./messages.js";
+export { sendToPlugin, createMessageHandler } from "./messages.js";
 
 // Color utilities
 export {

package/src/lib/resize.js

@@ -2,12 +2,12 @@
  * Auto-resize utilities for Figma plugin windows
  *
  * Usage in UI:
- *   import { resizeToFit, autoResize } from "figma-plugin-utils";
+ *   import { resizeToFit, autoResize } from "figma-plugin-utilities";
  *   resizeToFit(); // One-time resize
  *   autoResize();  // Watch for changes and auto-resize
  *
  * Usage in code.ts:
- *   import { handleResize } from "figma-plugin-utils/lib/figma-helpers";
+ *   import { handleResize } from "figma-plugin-utilities/lib/figma-helpers";
  *   // In your message handler:
  *   if (msg.type === "resize") handleResize(msg);
  */
@@ -73,10 +73,10 @@ export function resizeToFit(options = {}) {
 /**
  * Set up automatic resizing when content changes
  * Uses ResizeObserver to watch for size changes
- * 
+ *
  * IMPORTANT: The container element must NOT have height: 100% or fixed height.
  * Use bind:this on a wrapper element that flows naturally with content.
- * 
+ *
  * @param {object} options - Auto-resize options
  * @param {HTMLElement} options.container - Container element to observe (required, must not have fixed height)
  * @param {number} [options.width] - Width in pixels (uses default if not specified)

package/src/lib/validation.js

@@ -58,7 +58,7 @@ export function validateUrl(url, options = { required: true }) {
     }
 
     return { valid: true };
-  } catch (err) {
+  } catch {
     return {
       valid: false,
       error: "Invalid URL format",
@@ -148,6 +148,7 @@ export function sanitizeInput(input, maxLength) {
   }
 
   // Remove null bytes and control characters (except newlines and tabs)
+  // eslint-disable-next-line no-control-regex
   str = str.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F]/g, "");
 
   // Trim whitespace