@pixerate/editor-svelte 0.105.0 → 0.107.0

package/dist/parameters/ParameterColor.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { normalizeHexColor, parameterLabel, type ColorParameterField } from '@pixerate/editor/parameters';
+  import ColorPicker from '../color/ColorPicker.svelte';
   import ParameterCommitInput from './ParameterCommitInput.svelte';
-  import { parameterInputClass, parameterRangeClass } from './styles.js';
+  import { parameterInputClass } from './styles.js';
 
   interface Props {
     field: ColorParameterField;
@@ -19,44 +20,53 @@
   const alpha = $derived(!!field.alpha);
   const hex = $derived(normalizeHexColor(value, true) ?? '#000000ff');
   const rgb = $derived(hex.slice(0, 7));
-  const a = $derived(hex.slice(7));
   const shown = $derived(alpha ? hex : rgb);
   const off = $derived(disabled || !!field.readOnly);
   const name = $derived(parameterLabel(field));
 
-  let picking = false;
-  function start() {
-    if (picking) return;
-    picking = true;
-    ongesturestart?.();
-  }
-  function end() {
-    if (!picking) return;
-    picking = false;
-    ongestureend?.();
-  }
+  let open = $state(false);
+  let containerEl = $state<HTMLDivElement | null>(null);
+  let buttonEl = $state<HTMLButtonElement | null>(null);
+  let popoverEl = $state<HTMLDivElement | null>(null);
+
+  $effect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (containerEl && !containerEl.contains(e.target as Node)) {
+        open = false;
+      }
+    }
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        open = false;
+        buttonEl?.focus();
+      }
+    }
+    window.addEventListener('pointerdown', onPointerDown, true);
+    window.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      window.removeEventListener('pointerdown', onPointerDown, true);
+      window.removeEventListener('keydown', onKeyDown, true);
+    };
+  });
 </script>
 
-<!-- A colour picker with a hex box, an alpha slider (with `alpha`) and swatches. -->
-<div class="space-y-1.5">
+<!-- A colour picker with a hex box and a popup ColorPicker. -->
+<div bind:this={containerEl} class="relative space-y-1.5">
   <div class="flex items-center gap-2">
-    <span
-      class="relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]"
+    <button
+      bind:this={buttonEl}
+      type="button"
+      aria-label={name}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      disabled={off}
+      onclick={() => (open = !open)}
+      class="relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
     >
       <span class="absolute inset-0" style:background={shown}></span>
-      <input
-        type="color"
-        aria-label={name}
-        value={rgb}
-        disabled={off}
-        class="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
-        oninput={(e) => {
-          start();
-          onchange(alpha ? `${e.currentTarget.value}${a}` : e.currentTarget.value);
-        }}
-        onblur={end}
-      />
-    </span>
+    </button>
     <ParameterCommitInput
       {id}
       aria-label="{name} hex"
@@ -70,40 +80,29 @@
       }}
     />
   </div>
-  {#if alpha}
-    <input
-      type="range"
-      aria-label="{name} opacity"
-      min="0"
-      max="255"
-      step="1"
-      value={parseInt(a, 16)}
-      disabled={off}
-      class={parameterRangeClass}
-      onpointerdown={start}
-      onpointerup={end}
-      onpointercancel={end}
-      onblur={end}
-      oninput={(e) => onchange(`${rgb}${Number(e.currentTarget.value).toString(16).padStart(2, '0')}`)}
-    />
-  {/if}
-  {#if field.swatches && field.swatches.length > 0}
-    <div class="flex flex-wrap gap-1">
-      {#each field.swatches as s (s)}
-        {@const swatch = normalizeHexColor(s, alpha)}
-        {#if swatch}
-          <button
-            type="button"
-            title={swatch}
-            aria-label="{name} {swatch}"
-            aria-pressed={swatch === shown}
-            disabled={off}
-            onclick={() => onchange(swatch)}
-            class="h-5 w-5 rounded border border-input aria-pressed:ring-1 aria-pressed:ring-primary"
-            style:background={swatch}
-          ></button>
-        {/if}
-      {/each}
+  {#if open}
+    <div
+      bind:this={popoverEl}
+      role="dialog"
+      aria-label={name}
+      tabindex="-1"
+      onfocusout={(e) => {
+        if (popoverEl && !popoverEl.contains(e.relatedTarget as Node)) {
+          open = false;
+        }
+      }}
+      class="absolute left-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-xl"
+      style="background: var(--popover, var(--background, #fff));"
+    >
+      <ColorPicker
+        value={shown}
+        {alpha}
+        swatches={field.swatches}
+        disabled={off}
+        {onchange}
+        {ongesturestart}
+        {ongestureend}
+      />
     </div>
   {/if}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.105.0",
+  "version": "0.107.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -88,6 +88,16 @@
       "svelte": "./dist/video-editor/index.js",
       "default": "./dist/video-editor/index.js"
     },
+    "./color": {
+      "types": "./dist/color/index.d.ts",
+      "svelte": "./dist/color/index.js",
+      "default": "./dist/color/index.js"
+    },
+    "./gradient": {
+      "types": "./dist/gradient/index.d.ts",
+      "svelte": "./dist/gradient/index.js",
+      "default": "./dist/gradient/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -130,6 +140,12 @@
       ],
       "video-editor": [
         "./dist/video-editor/index.d.ts"
+      ],
+      "color": [
+        "./dist/color/index.d.ts"
+      ],
+      "gradient": [
+        "./dist/gradient/index.d.ts"
       ]
     }
   },
@@ -144,7 +160,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.146.0"
+    "@pixerate/editor": "0.148.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",