@widgetic/editor 3.11.4 → 4.0.2

package/dist/components/WidgetPreview.svelte.d.ts

@@ -0,0 +1,100 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
+    /** standalone = resolve URL + postMessage internally; controlled = parent supplies src/state */ mode?: "standalone" | "controlled";
+    class?: string;
+    style?: string;
+    widget?: any;
+    apiBaseUrl?: string;
+    widgetBuilderUrl?: string;
+    designValues?: any;
+    contentValues?: any;
+    src?: string | null;
+    displayUrl?: string | null;
+    previewLoading?: boolean;
+    previewHydrating?: boolean;
+    previewError?: string | null;
+    previewRetryCount?: number;
+    previewHasRuntimeError?: boolean;
+    previewRuntimeErrorStatus?: number | null;
+    isContentReady?: boolean;
+    isLoadingUrl?: boolean;
+    isGeneratingCode?: boolean;
+    forceMockReady?: boolean;
+    debugMode?: boolean;
+    iframeReloadKey?: number;
+    width?: string;
+    height?: string;
+    contentHeight?: string;
+    showUrlBar?: boolean;
+    showUrlBarButtons?: boolean;
+    /** Mobile + desktop viewport buttons in URL bar (before New tab) */ showViewportButtons?: boolean;
+    mobileViewportWidth?: number;
+    mobileViewportHeight?: number;
+    enableResize?: boolean;
+    /** Observe stage size and fill it (desktop modal) */ autoFitStage?: boolean;
+    /** No padding/border on preview-content-container — matches widget-creator Edit panel */ compactChrome?: boolean;
+    /** Fixed preview stage size; inner iframe resizes within these bounds */ boundsWidth?: number | null;
+    boundsHeight?: number | null;
+    resizeWidth?: number | null;
+    resizeHeight?: number | null;
+    iframeEl?: HTMLIFrameElement | null;
+    getResizeLimits?: () => {
+        maxWidth: number;
+        maxHeight: number;
+    };
+    nudgeIframePaint?: () => void;
+    fitToContainer?: () => void;
+    sendMessageToPreview?: (message: Record<string, unknown>) => void;
+    goToItem?: (index: number) => void;
+    refreshValues?: () => void;
+}, {
+    load: CustomEvent<{
+        src: string | null;
+    }>;
+    error: CustomEvent<{
+        src: string | null;
+    }>;
+    refresh: CustomEvent<void>;
+    openInTab: CustomEvent<void>;
+    resize: CustomEvent<{
+        width: number;
+        height: number;
+    }>;
+    mobileViewport: CustomEvent<{
+        width: number;
+        height: number;
+    }>;
+    desktopViewport: CustomEvent<void>;
+    iframeLoad: CustomEvent<Event>;
+    iframeError: CustomEvent<Event>;
+    retry: CustomEvent<void>;
+    fixErrors: CustomEvent<void>;
+    viewErrors: CustomEvent<void>;
+    retryPreview: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    getResizeLimits: () => {
+        maxWidth: number;
+        maxHeight: number;
+    };
+    nudgeIframePaint: () => void;
+    fitToContainer: () => void;
+    sendMessageToPreview: (message: Record<string, unknown>) => void;
+    goToItem: (index: number) => void;
+    refreshValues: () => void;
+}, string>;
+type WidgetPreview = InstanceType<typeof WidgetPreview>;
+export default WidgetPreview;

package/dist/components/color-select/ColorSelect.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+  // Svelte imports
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+
+  // Constants imports
+import {
+  eps,
+  border_size,
+  gap_size
+} from "./constants";
+
+  // Render functions imports
+import { render_main_image, render_slider_image } from "./render";
+
+import { oklab_to_okhsv, okhsv_to_oklab, rgb_to_okhsv, okhsv_to_rgb } from "./color";
+const instanceId = `okhsv_${Math.random().toString(36).slice(2, 8)}`;
+
+export let rgb: RGB | undefined = undefined;
+export let a: number = 1;
+export let oklab: OKLab | undefined = undefined;
+export let okhsv: OKHSV | undefined = undefined;
+export let pickerSize = 200;
+export let sliderWidth = 30;
+export let onchange: ((detail: any) => void) | undefined = undefined;
+
+
+$: width = pickerSize + sliderWidth + gap_size + border_size * 2;
+$: height = pickerSize + border_size * 2;
+$: color = convertToInternal(rgb, oklab, okhsv);
+$: uihsv = scale_to_ui(color);
+
+// TypeScript type fixes
+/**
+ * Types for color objects
+ */
+type RGB = { r: number; g: number; b: number; a?: number };
+type OKLab = { l: number; a: number; b: number };
+type OKHSV = { h: number; s: number; v: number };
+
+function scale_to_ui(okhsv2: OKHSV): { h: number; s: number; v: number } {
+  return {
+    h: clamp_ui(okhsv2.h / 360),
+    s: clamp_ui(okhsv2.s),
+    v: clamp_ui(1 - okhsv2.v)
+  };
+}
+function clamp(x: number): number {
+  return x < eps ? eps : x > 1 - eps ? 1 - eps : x;
+}
+function clamp_ui(value: number): number {
+  return value < 0 ? 0 : value > 1 ? pickerSize : value * pickerSize;
+}
+function convertToInternal(rgb2: RGB | undefined, oklab2: OKLab | undefined, okhsv2: OKHSV | undefined): OKHSV {
+  if (okhsv2) {
+    return okhsv2;
+  }
+  if (oklab2) {
+    return oklab_to_okhsv(oklab2);
+  }
+  if (rgb2) {
+    return rgb_to_okhsv(rgb2);
+  }
+  throw "rgb, oklab, or okhsv required";
+}
+async function update_input(): Promise<void> {
+  if (okhsv) {
+    const detail = { okhsv: color, a };
+    dispatch("change", detail);
+    onchange?.(detail);
+  }
+  if (oklab) {
+    const detail = { oklab: okhsv_to_oklab(color), a };
+    dispatch("change", detail);
+    onchange?.(detail);
+  }
+  if (rgb) {
+    const rgbColor = okhsv_to_rgb(color);
+    const detail = { rgb: { ...rgbColor, a }, a };
+    dispatch("change", detail);
+    onchange?.(detail);
+  }
+}
+function update_sv(x: number, y: number): void {
+  let new_s = clamp(x / pickerSize);
+  let new_v = clamp(1 - y / pickerSize);
+  color.s = new_s;
+  color.v = new_v;
+  update_input();
+}
+function update_h(x: number, y: number): void {
+  let h = clamp(y / pickerSize);
+  color.h = h * 360;
+  color.s = Math.max(color.s, 1e-5);
+  color.v = Math.max(color.v, 1e-5);
+  update_input();
+}
+function pointer(node: HTMLElement, fn: (x: number, y: number) => void) {
+  let active = false;
+  function update(event: PointerEvent) {
+    const x = event.offsetX;
+    const y = event.offsetY;
+    fn(x, y);
+  }
+  function onpointerdown(event: PointerEvent) {
+    event.stopPropagation();
+    node.setPointerCapture(event.pointerId);
+    update(event);
+    active = true;
+  }
+  function onpointermove(event: PointerEvent) {
+    event.stopPropagation();
+    if (active) {
+      update(event);
+    }
+  }
+  function onpointerend(event: PointerEvent) {
+    event.stopPropagation();
+    node.releasePointerCapture(event.pointerId);
+    active = false;
+  }
+  node.addEventListener("pointerdown", onpointerdown, { passive: true });
+  node.addEventListener("pointermove", onpointermove, { passive: true });
+  node.addEventListener("pointerup", onpointerend, { passive: true });
+  node.addEventListener("pointercancel", onpointerend, { passive: true });
+  return {
+    destroy() {
+      node.removeEventListener("pointerdown", onpointerdown);
+      node.removeEventListener("pointermove", onpointermove);
+      node.removeEventListener("pointerup", onpointerend);
+      node.removeEventListener("pointercancel", onpointerend);
+    }
+  };
+}
+function onKeydown(event: KeyboardEvent) {
+  const keyHandled = () => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const step = event.shiftKey ? 10 : 1;
+  switch (event.key) {
+    case "ArrowUp":
+      if (event.altKey) {
+        update_h(0, Math.round(uihsv.h - step));
+      } else {
+        update_sv(uihsv.s, Math.round(uihsv.v - step));
+      }
+      keyHandled();
+      break;
+    case "ArrowDown":
+      if (event.altKey) {
+        update_h(0, Math.round(uihsv.h + step));
+      } else {
+        update_sv(uihsv.s, Math.round(uihsv.v + step));
+      }
+      keyHandled();
+      break;
+    case "ArrowLeft":
+      update_sv(Math.round(uihsv.s - step), uihsv.v);
+      keyHandled();
+      break;
+    case "ArrowRight":
+      update_sv(Math.round(uihsv.s + step), uihsv.v);
+      keyHandled();
+      break;
+  }
+}
+// When the color or alpha changes, update the bound value
+$: if (rgb && typeof a === 'number') {
+  rgb.a = a;
+}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class={$$props.class}
+  tabindex="0"
+  style="width: {width}px; height: {height}px;"
+  on:keydown={onKeydown}
+>
+	<!-- svelte-ignore element_invalid_self_closing_tag -->
+	<canvas
+		id="{instanceId}_sv"
+        width={pickerSize}
+        height={pickerSize}
+        style:top="{border_size}px"
+        style:left="{border_size}px"
+        use:pointer={update_sv}
+        use:render_main_image={color.h}
+	/>
+	<!-- svelte-ignore element_invalid_self_closing_tag -->
+	<canvas
+        width={sliderWidth}
+        height={pickerSize}
+        style:top="{border_size}px"
+        style:left="{pickerSize + gap_size}px"
+        use:pointer={update_h}
+        use:render_slider_image
+	/>
+
+	<svg {width} {height}>
+		<g transform="translate({border_size},{border_size})">
+			<g transform="translate({uihsv.s},{uihsv.v})">
+				<circle
+					cx="0"
+					cy="0"
+					r="5"
+					fill="none"
+					stroke-width="1.75"
+					stroke="#fff"
+				/>
+				<circle
+					cx="0"
+					cy="0"
+					r="6"
+					fill="none"
+					stroke-width="1.25"
+					stroke="#000"
+				/>
+			</g>
+		</g>
+		<g transform="translate({pickerSize + gap_size},{border_size})">
+			<g transform="translate(0,{uihsv.h})">
+				<polygon
+					points="-7,-4 -1,0 -7,4"
+					fill="#fff"
+					stroke-width="0.8"
+					stroke="#000"
+				/>
+				<polygon
+					points="{sliderWidth + 7},-4 {sliderWidth + 1},0 {sliderWidth +
+						7},4"
+					fill="#fff"
+					stroke-width="0.8"
+					stroke="#000"
+				/>
+			</g>
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		position: relative;
+		outline: 0;
+	}
+
+	canvas,
+	svg {
+		touch-action: none;
+		position: absolute;
+	}
+
+	svg {
+		pointer-events: none;
+	}
+</style>

package/dist/components/color-select/ColorSelect.svelte.d.ts

@@ -0,0 +1,42 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ColorSelect: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    rgb?: {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    } | undefined;
+    a?: number;
+    oklab?: {
+        l: number;
+        a: number;
+        b: number;
+    } | undefined;
+    okhsv?: {
+        h: number;
+        s: number;
+        v: number;
+    } | undefined;
+    pickerSize?: number;
+    sliderWidth?: number;
+    onchange?: ((detail: any) => void) | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorSelect = InstanceType<typeof ColorSelect>;
+export default ColorSelect;

package/dist/components/color-select/color.d.ts

@@ -0,0 +1,25 @@
+export function oklab_to_okhsv(oklab: any): {
+    h: number;
+    s: number;
+    v: number;
+};
+export function okhsv_to_rgb(okhsv: any): {
+    r: number;
+    g: number;
+    b: number;
+};
+export function okhsv_to_oklab(okhsv: any): {
+    l: number;
+    a: number;
+    b: number;
+};
+export function rgb_to_okhsv(rgb: any): {
+    h: number;
+    s: number;
+    v: number;
+};
+export function okhsl_to_rgb(okhsl: any): {
+    r: number;
+    g: number;
+    b: number;
+};

package/dist/components/color-select/color.js

@@ -0,0 +1,21 @@
+import { convert, OKHSL, OKHSV, OKLab, sRGB } from '@texel/color';
+export function oklab_to_okhsv(oklab) {
+    const [h, s, v] = convert([oklab.l, oklab.a, oklab.b], OKLab, OKHSV);
+    return { h: h ?? 0, s, v };
+}
+export function okhsv_to_rgb(okhsv) {
+    const [r, g, b] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, sRGB);
+    return { r, g, b };
+}
+export function okhsv_to_oklab(okhsv) {
+    const [l, a, b] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, OKLab);
+    return { l, a, b };
+}
+export function rgb_to_okhsv(rgb) {
+    const [h, s, v] = convert([rgb.r, rgb.g, rgb.b], sRGB, OKHSV);
+    return { h, s, v };
+}
+export function okhsl_to_rgb(okhsl) {
+    const [r, g, b] = convert([okhsl.h, okhsl.s, okhsl.l], OKHSL, sRGB);
+    return { r, g, b };
+}

package/dist/components/color-select/constants.d.ts

@@ -0,0 +1,5 @@
+export const picker_size: 256;
+export const slider_width: 31;
+export const border_size: 10;
+export const gap_size: 30;
+export const eps: 0.0001;

package/dist/components/color-select/constants.js

@@ -0,0 +1,5 @@
+export const picker_size = 256;
+export const slider_width = 31;
+export const border_size = 10;
+export const gap_size = 30;
+export const eps = 0.0001;

package/dist/components/color-select/render.d.ts

@@ -0,0 +1,5 @@
+export function render_slider_image(canvas: any): void;
+export function render_main_image(canvas: any, hue: any): {
+    update: (hue: any) => void;
+    destroy(): void;
+};

package/dist/components/color-select/render.js

@@ -0,0 +1,77 @@
+import { f_shader, v_shader } from './shaders';
+import { picker_size, slider_width } from './constants';
+import { okhsl_to_rgb } from './color';
+export function render_slider_image(canvas) {
+    const ctx = canvas.getContext('2d');
+    const data = new Uint8ClampedArray(picker_size * slider_width * 4);
+    for (let i = 0; i < picker_size; i++) {
+        const a_ = Math.cos(2 * Math.PI * i / picker_size);
+        const b_ = Math.sin(2 * Math.PI * i / picker_size);
+        const rgb = okhsl_to_rgb({
+            h: i / picker_size * 360,
+            s: 0.9,
+            l: 0.65 + 0.17 * b_ - 0.08 * a_,
+        });
+        for (let j = 0; j < slider_width; j++) {
+            const index = 4 * (i * slider_width + j);
+            data[index + 0] = rgb.r * 255;
+            data[index + 1] = rgb.g * 255;
+            data[index + 2] = rgb.b * 255;
+            data[index + 3] = 255;
+        }
+    }
+    const imageData = new ImageData(data, slider_width);
+    ctx.putImageData(imageData, 0, 0);
+}
+export function render_main_image(canvas, hue) {
+    const gl = canvas.getContext('webgl');
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    const shaderProgram = initShaderProgram(gl, v_shader, f_shader);
+    const position = gl.getAttribLocation(shaderProgram, "position");
+    const resolution = gl.getUniformLocation(shaderProgram, "resolution");
+    const hue_rad = gl.getUniformLocation(shaderProgram, "hue_rad");
+    gl.useProgram(shaderProgram);
+    gl.uniform2fv(resolution, [gl.canvas.width, gl.canvas.height]);
+    const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    function update(hue) {
+        requestAnimationFrame(() => {
+            gl.uniform1f(hue_rad, hue / 360);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        });
+    }
+    update(hue);
+    return {
+        update,
+        destroy() {
+            gl.deleteProgram(shaderProgram);
+        }
+    };
+}
+function initShaderProgram(gl, vsSource, fsSource) {
+    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+    const shaderProgram = gl.createProgram();
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        throw `unable to init shader: ${gl.getProgramInfoLog(shaderProgram)}`;
+    }
+    return shaderProgram;
+}
+function loadShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const info = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw `error compiling shaders: ${info}`;
+    }
+    return shader;
+}

package/dist/components/color-select/shaders.d.ts

@@ -0,0 +1,3 @@
+declare const l: string;
+declare const t: string;
+export { l as f_shader, t as v_shader };

package/dist/components/color-select/shaders.js

@@ -0,0 +1,8 @@
+var _ = `precision mediump float;uniform vec2 resolution;uniform float hue_rad;precision mediump float;
+#define M_PI 3.1415926536
+float cbrt(float x){return sign(x)*pow(abs(x),1.0/3.0);}float srgb_transfer_function(float a){return .0031308>=a ? 12.92*a : 1.055*pow(a,.4166666666666667)-.055;}vec3 oklab_to_linear_srgb(vec3 c){float l_=c.x+0.3963377774*c.y+0.2158037573*c.z;float m_=c.x-0.1055613458*c.y-0.0638541728*c.z;float s_=c.x-0.0894841775*c.y-1.2914855480*c.z;float l=l_*l_*l_;float m=m_*m_*m_;float s=s_*s_*s_;return vec3(+4.0767416621*l-3.3077115913*m+0.2309699292*s,-1.2684380046*l+2.6097574011*m-0.3413193965*s,-0.0041960863*l-0.7034186147*m+1.7076147010*s);}float compute_max_saturation(float a,float b){float k0,k1,k2,k3,k4,wl,wm,ws;if(-1.88170328*a-0.80936493*b>1.0){k0=+1.19086277;k1=+1.76576728;k2=+0.59662641;k3=+0.75515197;k4=+0.56771245;wl=+4.0767416621;wm=-3.3077115913;ws=+0.2309699292;}else if(1.81444104*a-1.19445276*b>1.0){k0=+0.73956515;k1=-0.45954404;k2=+0.08285427;k3=+0.12541070;k4=+0.14503204;wl=-1.2684380046;wm=+2.6097574011;ws=-0.3413193965;}else{k0=+1.35733652;k1=-0.00915799;k2=-1.15130210;k3=-0.50559606;k4=+0.00692167;wl=-0.0041960863;wm=-0.7034186147;ws=+1.7076147010;}float S=k0+k1*a+k2*b+k3*a*a+k4*a*b;float k_l=+0.3963377774*a+0.2158037573*b;float k_m=-0.1055613458*a-0.0638541728*b;float k_s=-0.0894841775*a-1.2914855480*b;{float l_=1.0+S*k_l;float m_=1.0+S*k_m;float s_=1.0+S*k_s;float l=l_*l_*l_;float m=m_*m_*m_;float s=s_*s_*s_;float l_dS=3.0*k_l*l_*l_;float m_dS=3.0*k_m*m_*m_;float s_dS=3.0*k_s*s_*s_;float l_dS2=6.0*k_l*k_l*l_;float m_dS2=6.0*k_m*k_m*m_;float s_dS2=6.0*k_s*k_s*s_;float f=wl*l+wm*m+ws*s;float f1=wl*l_dS+wm*m_dS+ws*s_dS;float f2=wl*l_dS2+wm*m_dS2+ws*s_dS2;S=S-f*f1/(f1*f1-0.5*f*f2);}return S;}vec2 find_cusp(float a,float b){float S_cusp=compute_max_saturation(a,b);vec3 rgb_at_max=oklab_to_linear_srgb(vec3(1,S_cusp*a,S_cusp*b));float L_cusp=cbrt(1.0/max(max(rgb_at_max.r,rgb_at_max.g),rgb_at_max.b));float C_cusp=L_cusp*S_cusp;return vec2(L_cusp,C_cusp);}float toe_inv(float x){float k_1=0.206;float k_2=0.03;float k_3=(1.0+k_1)/(1.0+k_2);return(x*x+k_1*x)/(k_3*(x+k_2));}vec2 to_ST(vec2 cusp){float L=cusp.x;float C=cusp.y;return vec2(C/L,C/(1.0-L));}vec3 okhsv_to_srgb(vec3 hsv){float h=hsv.x;float s=hsv.y;float v=hsv.z;float a_=cos(2.0*M_PI*h);float b_=sin(2.0*M_PI*h);vec2 cusp=find_cusp(a_,b_);vec2 ST_max=to_ST(cusp);float S_max=ST_max.x;float T_max=ST_max.y;float S_0=0.5;float k=1.0-S_0/S_max;float L_v=1.0-s*S_0/(S_0+T_max-T_max*k*s);float C_v=s*T_max*S_0/(S_0+T_max-T_max*k*s);float L=v*L_v;float C=v*C_v;float L_vt=toe_inv(L_v);float C_vt=C_v*L_vt/L_v;float L_new=toe_inv(L);C=C*L_new/L;L=L_new;vec3 rgb_scale=oklab_to_linear_srgb(vec3(L_vt,a_*C_vt,b_*C_vt));float scale_L=cbrt(1.0/max(max(rgb_scale.r,rgb_scale.g),max(rgb_scale.b,0.0)));L=L*scale_L;C=C*scale_L;vec3 rgb=oklab_to_linear_srgb(vec3(L,C*a_,C*b_));return vec3(srgb_transfer_function(rgb.r),srgb_transfer_function(rgb.g),srgb_transfer_function(rgb.b));}void main(){vec2 uv=gl_FragCoord.xy/resolution;float l=uv.y;float h=hue_rad;vec3 hsl=vec3(h,uv.x,uv.y);vec3 hsvRGB=okhsv_to_srgb(hsl);gl_FragColor=vec4(hsvRGB,1.0);}`, a = "attribute vec4 position;void main(){gl_Position=position;}";
+const l = _, t = a;
+export {
+  l as f_shader,
+  t as v_shader
+};