@spacesync/client 0.1.0 → 0.1.2

package/dist/forms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api/errors.ts","../src/forms/useApiForm.ts"],"names":[],"mappings":";;;;;;AAwBO,IAAM,cAAA,GAAN,MAAM,eAAA,SAAuB,KAAA,CAAM;AAAA,EAC/B,IAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EAET,WAAA,CAAY,IAAA,EAA0B,OAAA,EAAiB,OAAA,GAAiC,EAAC,EAAG;AAC1F,IAAA,KAAA,CAAM,OAAO,CAAA;AACb,IAAA,IAAA,CAAK,IAAA,GAAO,gBAAA;AACZ,IAAA,IAAA,CAAK,IAAA,GAAO,IAAA;AACZ,IAAA,IAAA,CAAK,aAAa,OAAA,CAAQ,UAAA;AAC1B,IAAA,IAAA,CAAK,UAAU,OAAA,CAAQ,OAAA;AACvB,IAAA,IAAA,CAAK,cAAc,OAAA,CAAQ,WAAA;AAC3B,IAAA,MAAA,CAAO,cAAA,CAAe,IAAA,EAAM,eAAA,CAAe,SAAS,CAAA;AAAA,EACtD;AACF,CAAA;AAEO,SAAS,iBAAiB,GAAA,EAAqC;AACpE,EAAA,OAAO,GAAA,YAAe,cAAA;AACxB;;;ACLO,SAAS,UAAA,CAAsC,QAAiB,OAAA,EAA0C;AAK/G,EAAA,MAAM,IAAA,GAAO,QAA0B,EAAE,QAAA,EAAU,YAAY,MAAe,CAAA,EAAG,GAAG,OAAA,EAAS,CAAA;AAE7F,EAAA,MAAM,gBAAgB,CACpB,OAAA,EACA,kBAEA,IAAA,CAAK,YAAA,CAAa,OAAO,MAAA,KAAW;AAClC,IAAA,IAAI;AACF,MAAA,MAAM,QAAQ,MAAM,CAAA;AAAA,IACtB,SAAS,GAAA,EAAK;AACZ,MAAA,IAAI,CAAC,gBAAA,CAAiB,GAAG,CAAA,EAAG,MAAM,GAAA;AAElC,MAAA,IAAI,aAAA,EAAe,UAAA,GAAa,GAAA,EAAK,IAAI,CAAA,EAAG;AAE5C,MAAA,QAAQ,IAAI,IAAA;AAAM,QAChB,KAAK,SAAA;AACH,UAAA,IAAA,CAAK,QAAA,CAAS,QAAQ,EAAE,IAAA,EAAM,WAAW,OAAA,EAAS,GAAA,CAAI,SAAS,CAAA;AAC/D,UAAA;AAAA,QACF,KAAK,YAAA,EAAc;AACjB,UAAA,MAAM,WAAA,GAAc,IAAI,GAAA,CAAI,MAAA,CAAO,KAAK,IAAA,CAAK,SAAA,EAAW,CAAC,CAAA;AACzD,UAAA,IAAI,SAAA,GAAY,KAAA;AAChB,UAAA,KAAA,MAAW,UAAA,IAAc,GAAA,CAAI,WAAA,IAAe,EAAC,EAAG;AAC9C,YAAA,IAAI,WAAA,CAAY,GAAA,CAAI,UAAA,CAAW,IAAI,CAAA,EAAG;AACpC,cAAA,IAAA,CAAK,QAAA,CAAS,WAAW,IAAA,EAAqC;AAAA,gBAC5D,IAAA,EAAM,QAAA;AAAA,gBACN,SAAS,UAAA,CAAW;AAAA,eACrB,CAAA;AACD,cAAA,SAAA,GAAY,IAAA;AAAA,YACd;AAAA,UACF;AACA,UAAA,IAAI,CAAC,SAAA,EAAW,IAAA,CAAK,QAAA,CAAS,MAAA,EAAQ,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAS,GAAA,CAAI,OAAA,EAAS,CAAA;AAC9E,UAAA;AAAA,QACF;AAAA,QACA,KAAK,MAAA;AAAA,QACL;AACE,UAAA,IAAA,CAAK,QAAA,CAAS,QAAQ,EAAE,IAAA,EAAM,UAAU,OAAA,EAAS,GAAA,CAAI,SAAS,CAAA;AAC9D,UAAA;AAAA;AACJ,IACF;AAAA,EACF,CAAC,CAAA;AAEH,EAAA,OAAO,EAAE,GAAG,IAAA,EAAM,aAAA,EAAc;AAClC","file":"forms.js","sourcesContent":["import axios from \"axios\";\nimport { z } from \"zod\";\nimport { apiErrorBodySchema } from \"./envelope\";\n\n/**\n * - \"network\": the request never got a response at all (server unreachable, timeout, CORS/preflight failure).\n * - \"validation\": HTTP 400 from our API where `error.details` is the Zod-issues shape produced by\n *   `validate.middleware.ts` — field-mappable.\n * - \"http\": every other status our API returns (401, 403, 404, 409, 500, ...). Not field-specific by default.\n */\nexport type ApiClientErrorKind = \"network\" | \"validation\" | \"http\";\n\nexport interface ApiFieldError {\n  /** Dot-path, e.g. \"email\" — matched against react-hook-form field names. */\n  path: string;\n  message: string;\n}\n\nexport interface ApiClientErrorOptions {\n  statusCode?: number;\n  details?: unknown;\n  fieldErrors?: ApiFieldError[];\n}\n\nexport class ApiClientError extends Error {\n  readonly kind: ApiClientErrorKind;\n  readonly statusCode?: number;\n  readonly details?: unknown;\n  readonly fieldErrors?: ApiFieldError[];\n\n  constructor(kind: ApiClientErrorKind, message: string, options: ApiClientErrorOptions = {}) {\n    super(message);\n    this.name = \"ApiClientError\";\n    this.kind = kind;\n    this.statusCode = options.statusCode;\n    this.details = options.details;\n    this.fieldErrors = options.fieldErrors;\n    Object.setPrototypeOf(this, ApiClientError.prototype);\n  }\n}\n\nexport function isApiClientError(err: unknown): err is ApiClientError {\n  return err instanceof ApiClientError;\n}\n\ninterface ZodLikeIssue {\n  path: Array<string | number>;\n  message: string;\n}\n\nfunction isZodIssueArray(details: unknown): details is ZodLikeIssue[] {\n  return (\n    Array.isArray(details) &&\n    details.length > 0 &&\n    details.every(\n      (issue) =>\n        typeof issue === \"object\" &&\n        issue !== null &&\n        Array.isArray((issue as ZodLikeIssue).path) &&\n        typeof (issue as ZodLikeIssue).message === \"string\",\n    )\n  );\n}\n\nfunction toFieldErrors(issues: ZodLikeIssue[]): ApiFieldError[] {\n  return issues.map((issue) => ({\n    path: issue.path.join(\".\"),\n    message: issue.message,\n  }));\n}\n\n/**\n * Normalizes anything that can be thrown while making a request (axios error,\n * envelope-shape mismatch, or an unexpected exception) into one `ApiClientError`,\n * classified by `kind` so callers like `useApiForm` can apply a sensible default\n * per failure mode instead of treating a dropped connection the same as a 409.\n */\nexport function normalizeAxiosError(err: unknown): ApiClientError {\n  if (isApiClientError(err)) return err;\n\n  if (axios.isAxiosError(err)) {\n    if (!err.response) {\n      return new ApiClientError(\"network\", \"Unable to reach the server. Check your connection and try again.\");\n    }\n\n    const status = err.response.status;\n    const parsedBody = apiErrorBodySchema.safeParse(err.response.data);\n    const message = parsedBody.success ? parsedBody.data.error.message : `Request failed with status ${status}`;\n    const details = parsedBody.success ? parsedBody.data.error.details : undefined;\n\n    if (status === 400 && isZodIssueArray(details)) {\n      return new ApiClientError(\"validation\", message, {\n        statusCode: status,\n        details,\n        fieldErrors: toFieldErrors(details),\n      });\n    }\n\n    return new ApiClientError(\"http\", message, { statusCode: status, details });\n  }\n\n  if (err instanceof z.ZodError) {\n    // The server responded 2xx but the payload didn't match the schema we expected -\n    // a frontend/backend contract mismatch, not a user-facing form error.\n    return new ApiClientError(\"http\", \"Unexpected response shape from the server.\", {\n      details: err.issues,\n    });\n  }\n\n  const message = err instanceof Error ? err.message : \"Something went wrong. Please try again.\";\n  return new ApiClientError(\"http\", message);\n}\n","import { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  useForm,\n  type FieldPath,\n  type FieldValues,\n  type UseFormProps,\n  type UseFormReturn,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport { isApiClientError, type ApiClientError } from \"../api/errors\";\n\nexport interface SubmitWithApiOptions<TFieldValues extends FieldValues> {\n  /**\n   * Called before the default per-`kind` handling below. Return `true` if you fully handled the\n   * error yourself (e.g. mapped a 409 \"email already registered\" onto the `email` field) - this\n   * skips the default handling. Return `false`/`undefined` to fall back to it.\n   */\n  onApiError?: (error: ApiClientError, form: UseFormReturn<TFieldValues>) => boolean | void;\n}\n\n/**\n * Wraps `react-hook-form` + the zod resolver, and gives `submitWithApi` a default error-handling\n * policy per `ApiClientError.kind`:\n *\n * - client-side validation (bad email, missing field) never reaches here - `zodResolver` blocks the\n *   submit and populates per-field errors before `onValid` runs.\n * - \"network\" (server unreachable) -> root error, generic \"can't reach the server\" wording.\n * - \"validation\" (server-side 400 with field-mappable issues) -> mapped onto matching fields by name;\n *   anything that can't be matched falls back to a root error.\n * - \"http\" (401/403/404/409/500, etc.) -> root error by default; not reliably field-mappable from the\n *   backend's response shape, so a specific form can opt in via `onApiError` (e.g. map a register 409\n *   onto the `email` field).\n *\n * A 401 caused by an expired session on an *authenticated* call has already been resolved one layer\n * down, inside `createApiClient`'s response interceptor (silent refresh-and-retry) - by the time an\n * error reaches here, refresh already failed and the app-level `onAuthExpired` callback already fired,\n * so this hook doesn't need auth-specific branching of its own.\n */\nexport function useApiForm<TSchema extends z.ZodType>(schema: TSchema, options?: UseFormProps<z.infer<TSchema>>) {\n  // `zodResolver`'s overloads require a concrete Zod schema type it can pattern-match against\n  // (Zod v3's `_def.typeName` vs. v4's `_zod`), which a generic `TSchema extends z.ZodType` can't\n  // structurally prove even though it's always a real schema at runtime - this is a documented\n  // typing limitation of `@hookform/resolvers`, not unsafe in practice.\n  const form = useForm<z.infer<TSchema>>({ resolver: zodResolver(schema as never), ...options });\n\n  const submitWithApi = (\n    onValid: (values: z.infer<TSchema>) => Promise<void>,\n    submitOptions?: SubmitWithApiOptions<z.infer<TSchema>>,\n  ) =>\n    form.handleSubmit(async (values) => {\n      try {\n        await onValid(values);\n      } catch (err) {\n        if (!isApiClientError(err)) throw err; // programmer bug - don't swallow, let it surface normally\n\n        if (submitOptions?.onApiError?.(err, form)) return; // caller fully handled it\n\n        switch (err.kind) {\n          case \"network\":\n            form.setError(\"root\", { type: \"network\", message: err.message });\n            break;\n          case \"validation\": {\n            const knownFields = new Set(Object.keys(form.getValues()));\n            let mappedAny = false;\n            for (const fieldError of err.fieldErrors ?? []) {\n              if (knownFields.has(fieldError.path)) {\n                form.setError(fieldError.path as FieldPath<z.infer<TSchema>>, {\n                  type: \"server\",\n                  message: fieldError.message,\n                });\n                mappedAny = true;\n              }\n            }\n            if (!mappedAny) form.setError(\"root\", { type: \"server\", message: err.message });\n            break;\n          }\n          case \"http\":\n          default:\n            form.setError(\"root\", { type: \"server\", message: err.message });\n            break;\n        }\n      }\n    });\n\n  return { ...form, submitWithApi };\n}\n"]}
+{"version":3,"sources":["../src/forms/useApiForm.ts"],"names":[],"mappings":";;;;AAsCO,SAAS,UAAA,CAAsC,QAAiB,OAAA,EAA0C;AAK/G,EAAA,MAAM,IAAA,GAAO,QAA0B,EAAE,QAAA,EAAU,YAAY,MAAe,CAAA,EAAG,GAAG,OAAA,EAAS,CAAA;AAE7F,EAAA,MAAM,gBAAgB,CACpB,OAAA,EACA,kBAEA,IAAA,CAAK,YAAA,CAAa,OAAO,MAAA,KAAW;AAClC,IAAA,IAAI;AACF,MAAA,MAAM,QAAQ,MAAM,CAAA;AAAA,IACtB,SAAS,GAAA,EAAK;AACZ,MAAA,IAAI,CAAC,gBAAA,CAAiB,GAAG,CAAA,EAAG,MAAM,GAAA;AAElC,MAAA,IAAI,aAAA,EAAe,UAAA,GAAa,GAAA,EAAK,IAAI,CAAA,EAAG;AAE5C,MAAA,QAAQ,IAAI,IAAA;AAAM,QAChB,KAAK,SAAA;AACH,UAAA,IAAA,CAAK,QAAA,CAAS,QAAQ,EAAE,IAAA,EAAM,WAAW,OAAA,EAAS,GAAA,CAAI,SAAS,CAAA;AAC/D,UAAA;AAAA,QACF,KAAK,YAAA,EAAc;AACjB,UAAA,MAAM,WAAA,GAAc,IAAI,GAAA,CAAI,MAAA,CAAO,KAAK,IAAA,CAAK,SAAA,EAAW,CAAC,CAAA;AACzD,UAAA,IAAI,SAAA,GAAY,KAAA;AAChB,UAAA,KAAA,MAAW,UAAA,IAAc,GAAA,CAAI,WAAA,IAAe,EAAC,EAAG;AAC9C,YAAA,IAAI,WAAA,CAAY,GAAA,CAAI,UAAA,CAAW,IAAI,CAAA,EAAG;AACpC,cAAA,IAAA,CAAK,QAAA,CAAS,WAAW,IAAA,EAAqC;AAAA,gBAC5D,IAAA,EAAM,QAAA;AAAA,gBACN,SAAS,UAAA,CAAW;AAAA,eACrB,CAAA;AACD,cAAA,SAAA,GAAY,IAAA;AAAA,YACd;AAAA,UACF;AACA,UAAA,IAAI,CAAC,SAAA,EAAW,IAAA,CAAK,QAAA,CAAS,MAAA,EAAQ,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAS,GAAA,CAAI,OAAA,EAAS,CAAA;AAC9E,UAAA;AAAA,QACF;AAAA,QACA,KAAK,MAAA;AAAA,QACL;AACE,UAAA,IAAA,CAAK,QAAA,CAAS,QAAQ,EAAE,IAAA,EAAM,UAAU,OAAA,EAAS,GAAA,CAAI,SAAS,CAAA;AAC9D,UAAA;AAAA;AACJ,IACF;AAAA,EACF,CAAC,CAAA;AAEH,EAAA,OAAO,EAAE,GAAG,IAAA,EAAM,aAAA,EAAc;AAClC","file":"forms.js","sourcesContent":["import { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  useForm,\n  type FieldPath,\n  type FieldValues,\n  type UseFormProps,\n  type UseFormReturn,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport { isApiClientError, type ApiClientError } from \"../api/errors\";\n\nexport interface SubmitWithApiOptions<TFieldValues extends FieldValues> {\n  /**\n   * Called before the default per-`kind` handling below. Return `true` if you fully handled the\n   * error yourself (e.g. mapped a 409 \"email already registered\" onto the `email` field) - this\n   * skips the default handling. Return `false`/`undefined` to fall back to it.\n   */\n  onApiError?: (error: ApiClientError, form: UseFormReturn<TFieldValues>) => boolean | void;\n}\n\n/**\n * Wraps `react-hook-form` + the zod resolver, and gives `submitWithApi` a default error-handling\n * policy per `ApiClientError.kind`:\n *\n * - client-side validation (bad email, missing field) never reaches here - `zodResolver` blocks the\n *   submit and populates per-field errors before `onValid` runs.\n * - \"network\" (server unreachable) -> root error, generic \"can't reach the server\" wording.\n * - \"validation\" (server-side 400 with field-mappable issues) -> mapped onto matching fields by name;\n *   anything that can't be matched falls back to a root error.\n * - \"http\" (401/403/404/409/500, etc.) -> root error by default; not reliably field-mappable from the\n *   backend's response shape, so a specific form can opt in via `onApiError` (e.g. map a register 409\n *   onto the `email` field).\n *\n * A 401 caused by an expired session on an *authenticated* call has already been resolved one layer\n * down, inside `createApiClient`'s response interceptor (silent refresh-and-retry) - by the time an\n * error reaches here, refresh already failed and the app-level `onAuthExpired` callback already fired,\n * so this hook doesn't need auth-specific branching of its own.\n */\nexport function useApiForm<TSchema extends z.ZodType>(schema: TSchema, options?: UseFormProps<z.infer<TSchema>>) {\n  // `zodResolver`'s overloads require a concrete Zod schema type it can pattern-match against\n  // (Zod v3's `_def.typeName` vs. v4's `_zod`), which a generic `TSchema extends z.ZodType` can't\n  // structurally prove even though it's always a real schema at runtime - this is a documented\n  // typing limitation of `@hookform/resolvers`, not unsafe in practice.\n  const form = useForm<z.infer<TSchema>>({ resolver: zodResolver(schema as never), ...options });\n\n  const submitWithApi = (\n    onValid: (values: z.infer<TSchema>) => Promise<void>,\n    submitOptions?: SubmitWithApiOptions<z.infer<TSchema>>,\n  ) =>\n    form.handleSubmit(async (values) => {\n      try {\n        await onValid(values);\n      } catch (err) {\n        if (!isApiClientError(err)) throw err; // programmer bug - don't swallow, let it surface normally\n\n        if (submitOptions?.onApiError?.(err, form)) return; // caller fully handled it\n\n        switch (err.kind) {\n          case \"network\":\n            form.setError(\"root\", { type: \"network\", message: err.message });\n            break;\n          case \"validation\": {\n            const knownFields = new Set(Object.keys(form.getValues()));\n            let mappedAny = false;\n            for (const fieldError of err.fieldErrors ?? []) {\n              if (knownFields.has(fieldError.path)) {\n                form.setError(fieldError.path as FieldPath<z.infer<TSchema>>, {\n                  type: \"server\",\n                  message: fieldError.message,\n                });\n                mappedAny = true;\n              }\n            }\n            if (!mappedAny) form.setError(\"root\", { type: \"server\", message: err.message });\n            break;\n          }\n          case \"http\":\n          default:\n            form.setError(\"root\", { type: \"server\", message: err.message });\n            break;\n        }\n      }\n    });\n\n  return { ...form, submitWithApi };\n}\n"]}

package/dist/image-picker-field.d.ts

@@ -1,11 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
-declare function ImagePickerField({ label, value, onChange, description, previewAlt, }: {
+declare function ImagePickerField({ label, value, onFileSelected, onRemove, description, previewAlt, disabled, }: {
     label?: string;
+    /** Preview URL supplied by the parent (`blob:`, signed HTTPS, or empty). */
     value?: string;
-    onChange: (value: string) => void;
+    onFileSelected: (file: File) => void;
+    onRemove?: () => void;
     description?: string;
     previewAlt?: string;
-}): react_jsx_runtime.JSX.Element;
+    disabled?: boolean;
+}): React.JSX.Element;
 
 export { ImagePickerField };

package/dist/image-picker-field.js

@@ -1,70 +1,23 @@
-import * as React from 'react';
+import { Button } from './chunk-VHINHHZQ.js';
+import './chunk-DMPSQ22Q.js';
 import { useRef } from 'react';
 import { ImagePlus, Trash2, Upload } from 'lucide-react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/files/image-picker-field.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 active:scale-[0.98] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:active:bg-destructive/70",
-        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:scale-[0.98] dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/60",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]",
-        ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/90 active:scale-[0.98] dark:hover:bg-accent/50 dark:active:bg-accent/40",
-        link: "text-primary underline-offset-4 hover:underline active:text-primary/80"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-md"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(function Button2({ className, variant, size, asChild = false, ...props }, ref) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size }), className),
-      ...props
-    }
-  );
-});
-Button.displayName = "Button";
 function ImagePickerField({
   label = "Image",
   value,
-  onChange,
+  onFileSelected,
+  onRemove,
   description,
-  previewAlt = "Selected image"
+  previewAlt = "Selected image",
+  disabled = false
 }) {
   const inputRef = useRef(null);
   const handleFileChange = (files) => {
     const file = files?.[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (typeof reader.result === "string") onChange(reader.result);
-    };
-    reader.readAsDataURL(file);
+    if (!file || disabled) return;
+    onFileSelected(file);
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
     /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: label }),
@@ -77,6 +30,7 @@ function ImagePickerField({
             type: "button",
             variant: "link",
             size: "sm",
+            disabled,
             onClick: () => inputRef.current?.click(),
             className: "h-auto gap-1.5 p-0 text-xs font-medium text-blue-600 dark:text-blue-400",
             children: [
@@ -85,32 +39,34 @@ function ImagePickerField({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        onRemove ? /* @__PURE__ */ jsxs(
           Button,
           {
             type: "button",
             variant: "link",
             size: "sm",
-            onClick: () => onChange(""),
+            disabled,
+            onClick: onRemove,
             className: "h-auto gap-1.5 p-0 text-xs font-medium text-red-600",
             children: [
               /* @__PURE__ */ jsx(Trash2, { size: 13 }),
               "Remove"
             ]
           }
-        )
+        ) : null
       ] })
     ] }) : /* @__PURE__ */ jsxs(
       Button,
       {
         type: "button",
         variant: "outline",
+        disabled,
         onClick: () => inputRef.current?.click(),
         className: "flex aspect-[4/3] h-auto max-w-sm w-full flex-col items-center justify-center gap-2 rounded-xl border-dashed bg-muted/50 px-4 py-5 text-center shadow-none hover:border-blue-300 hover:bg-blue-50/30 dark:hover:bg-blue-950/25",
         children: [
           /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card", children: /* @__PURE__ */ jsx(Upload, { size: 15, className: "text-muted-foreground" }) }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: "Choose image" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal text-muted-foreground whitespace-normal", children: description ?? "JPG, PNG or WebP. Stored in this prototype only." })
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal text-muted-foreground whitespace-normal", children: description ?? "JPG, PNG, WebP or GIF." })
         ]
       }
     ),
@@ -120,6 +76,7 @@ function ImagePickerField({
         ref: inputRef,
         type: "file",
         accept: "image/*",
+        disabled,
         className: "hidden",
         onChange: (event) => {
           handleFileChange(event.target.files);

package/dist/image-picker-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ui/utils.ts","../src/ui/button.tsx","../src/files/image-picker-field.tsx"],"names":["Button","jsx"],"mappings":"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","file":"image-picker-field.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 active:scale-[0.98] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:active:bg-destructive/70\",\n        outline:\n          \"border bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:scale-[0.98] dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/60\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground active:bg-accent/90 active:scale-[0.98] dark:hover:bg-accent/50 dark:active:bg-accent/40\",\n        link: \"text-primary underline-offset-4 hover:underline active:text-primary/80\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9 rounded-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean;\n    }\n>(function Button({ className, variant, size, asChild = false, ...props }, ref) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n});\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import { useRef } from \"react\";\nimport { ImagePlus, Trash2, Upload } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\n\nexport function ImagePickerField({\n  label = \"Image\",\n  value,\n  onChange,\n  description,\n  previewAlt = \"Selected image\",\n}: {\n  label?: string;\n  value?: string;\n  onChange: (value: string) => void;\n  description?: string;\n  previewAlt?: string;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleFileChange = (files: FileList | null) => {\n    const file = files?.[0];\n    if (!file) return;\n    const reader = new FileReader();\n    reader.onload = () => {\n      if (typeof reader.result === \"string\") onChange(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <label className=\"text-xs font-medium text-muted-foreground\">{label}</label>\n      {value ? (\n        <div className=\"max-w-sm overflow-hidden rounded-xl border border-border bg-card\">\n          <img src={value} alt={previewAlt} className=\"aspect-[4/3] w-full object-cover\" />\n          <div className=\"flex items-center justify-between gap-2 border-t border-border px-3 py-2\">\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              size=\"sm\"\n              onClick={() => inputRef.current?.click()}\n              className=\"h-auto gap-1.5 p-0 text-xs font-medium text-blue-600 dark:text-blue-400\"\n            >\n              <ImagePlus size={13} />\n              Change image\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              size=\"sm\"\n              onClick={() => onChange(\"\")}\n              className=\"h-auto gap-1.5 p-0 text-xs font-medium text-red-600\"\n            >\n              <Trash2 size={13} />\n              Remove\n            </Button>\n          </div>\n        </div>\n      ) : (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={() => inputRef.current?.click()}\n          className=\"flex aspect-[4/3] h-auto max-w-sm w-full flex-col items-center justify-center gap-2 rounded-xl border-dashed bg-muted/50 px-4 py-5 text-center shadow-none hover:border-blue-300 hover:bg-blue-50/30 dark:hover:bg-blue-950/25\"\n        >\n          <span className=\"flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card\">\n            <Upload size={15} className=\"text-muted-foreground\" />\n          </span>\n          <span className=\"text-xs font-medium text-foreground\">Choose image</span>\n          <span className=\"text-[11px] font-normal text-muted-foreground whitespace-normal\">\n            {description ?? \"JPG, PNG or WebP. Stored in this prototype only.\"}\n          </span>\n        </Button>\n      )}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        className=\"hidden\"\n        onChange={(event) => {\n          handleFileChange(event.target.files);\n          event.target.value = \"\";\n        }}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/files/image-picker-field.tsx"],"names":[],"mappings":"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","file":"image-picker-field.js","sourcesContent":["import { useRef } from \"react\";\nimport { ImagePlus, Trash2, Upload } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\n\nexport function ImagePickerField({\n  label = \"Image\",\n  value,\n  onFileSelected,\n  onRemove,\n  description,\n  previewAlt = \"Selected image\",\n  disabled = false,\n}: {\n  label?: string;\n  /** Preview URL supplied by the parent (`blob:`, signed HTTPS, or empty). */\n  value?: string;\n  onFileSelected: (file: File) => void;\n  onRemove?: () => void;\n  description?: string;\n  previewAlt?: string;\n  disabled?: boolean;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleFileChange = (files: FileList | null) => {\n    const file = files?.[0];\n    if (!file || disabled) return;\n    onFileSelected(file);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <label className=\"text-xs font-medium text-muted-foreground\">{label}</label>\n      {value ? (\n        <div className=\"max-w-sm overflow-hidden rounded-xl border border-border bg-card\">\n          <img src={value} alt={previewAlt} className=\"aspect-[4/3] w-full object-cover\" />\n          <div className=\"flex items-center justify-between gap-2 border-t border-border px-3 py-2\">\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              size=\"sm\"\n              disabled={disabled}\n              onClick={() => inputRef.current?.click()}\n              className=\"h-auto gap-1.5 p-0 text-xs font-medium text-blue-600 dark:text-blue-400\"\n            >\n              <ImagePlus size={13} />\n              Change image\n            </Button>\n            {onRemove ? (\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                disabled={disabled}\n                onClick={onRemove}\n                className=\"h-auto gap-1.5 p-0 text-xs font-medium text-red-600\"\n              >\n                <Trash2 size={13} />\n                Remove\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      ) : (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          disabled={disabled}\n          onClick={() => inputRef.current?.click()}\n          className=\"flex aspect-[4/3] h-auto max-w-sm w-full flex-col items-center justify-center gap-2 rounded-xl border-dashed bg-muted/50 px-4 py-5 text-center shadow-none hover:border-blue-300 hover:bg-blue-50/30 dark:hover:bg-blue-950/25\"\n        >\n          <span className=\"flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card\">\n            <Upload size={15} className=\"text-muted-foreground\" />\n          </span>\n          <span className=\"text-xs font-medium text-foreground\">Choose image</span>\n          <span className=\"text-[11px] font-normal text-muted-foreground whitespace-normal\">\n            {description ?? \"JPG, PNG, WebP or GIF.\"}\n          </span>\n        </Button>\n      )}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        disabled={disabled}\n        className=\"hidden\"\n        onChange={(event) => {\n          handleFileChange(event.target.files);\n          event.target.value = \"\";\n        }}\n      />\n    </div>\n  );\n}\n"]}

package/dist/layout-canvas-view.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type LayoutCanvasResourceType = "desks" | "rooms" | "other";
 interface LayoutCanvasRect {
@@ -52,6 +52,6 @@ interface LayoutCanvasViewProps {
     searchPlaceholder?: string;
 }
 declare function matchesCanvasResourceSearch(resourceName: string, planName: string | undefined, query: string): boolean;
-declare function LayoutCanvasView({ layout, rows, onResourceSelect, resourceQuickBook, searchQuery, onSearchQueryChange, searchPlaceholder, }: LayoutCanvasViewProps): react_jsx_runtime.JSX.Element;
+declare function LayoutCanvasView({ layout, rows, onResourceSelect, resourceQuickBook, searchQuery, onSearchQueryChange, searchPlaceholder, }: LayoutCanvasViewProps): React.JSX.Element;
 
 export { type LayoutCanvasResourceQuickBook, LayoutCanvasView, type LayoutCanvasViewProps, type LayoutCanvasViewRow, matchesCanvasResourceSearch };

package/dist/layout-canvas-view.js

@@ -1,228 +1,25 @@
-import * as React from 'react';
+import { useTheme } from './chunk-XU3EFSQX.js';
+import './chunk-4Y5DBM6Z.js';
+import { LIVE_RESOURCE_TYPE_META } from './chunk-ZIJQ7BXU.js';
+import { Tooltip, TooltipTrigger, TooltipContent, Popover, PopoverAnchor, PopoverContent } from './chunk-4A6RCBB5.js';
+import './chunk-RV5PMZYZ.js';
+import './chunk-L65F4EMK.js';
+import './chunk-PBNBLCC2.js';
+import './chunk-VVXGQKN7.js';
+import './chunk-7YCAAP43.js';
+import { PageListSearchField } from './chunk-H7EX6B6N.js';
+import './chunk-LUB7QWGU.js';
+import { Button } from './chunk-VHINHHZQ.js';
+import './chunk-FCY5FYJB.js';
+import './chunk-OWNUMPUC.js';
+import { cn } from './chunk-DMPSQ22Q.js';
 import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import { Minus, Plus, Maximize2, Box, DoorOpen, Armchair, Search, Calendar } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { useTheme } from 'next-themes';
-
-// src/live-space/layout-canvas-view.tsx
+import { Minus, Plus, Maximize2, Box, DoorOpen, Armchair, Calendar } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/live-space/layout-canvas-types.ts
 var DEFAULT_CANVAS_WIDTH = 1200;
 var DEFAULT_CANVAS_HEIGHT = 900;
-var LIVE_RESOURCE_TYPE_META = {
-  desks: {
-    label: "Desk",
-    rowAccent: "text-blue-700 bg-blue-50 border-blue-100",
-    Icon: Armchair,
-    iconTile: "bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-900/50"
-  },
-  rooms: {
-    label: "Room",
-    rowAccent: "text-orange-700 bg-orange-50 border-orange-100",
-    Icon: DoorOpen,
-    iconTile: "bg-orange-50 text-orange-600 border-orange-100 dark:bg-orange-950/50 dark:text-orange-400 dark:border-orange-900/50"
-  },
-  other: {
-    label: "Other",
-    rowAccent: "text-purple-700 bg-purple-50 border-purple-100",
-    Icon: Box,
-    iconTile: "bg-purple-50 text-purple-600 border-purple-100 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-900/50"
-  }
-};
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 active:scale-[0.98] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:active:bg-destructive/70",
-        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:scale-[0.98] dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/60",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]",
-        ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/90 active:scale-[0.98] dark:hover:bg-accent/50 dark:active:bg-accent/40",
-        link: "text-primary underline-offset-4 hover:underline active:text-primary/80"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-md"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(function Button2({ className, variant, size, asChild = false, ...props }, ref) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size }), className),
-      ...props
-    }
-  );
-});
-Button.displayName = "Button";
-var inputVariants = cva(
-  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-card text-foreground flex w-full min-w-0 rounded-md border px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:border-blue-400 focus-visible:ring-[3px] focus-visible:ring-blue-500/25 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-red-400 aria-invalid:ring-red-500/20 md:text-sm",
-  {
-    variants: {
-      size: {
-        sm: "h-8 text-sm",
-        default: "h-9",
-        lg: "h-10",
-        xl: "h-11"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var Input = React.forwardRef(function Input2({ className, type, size, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      type,
-      "data-slot": "input",
-      className: cn(inputVariants({ size }), className),
-      ...props
-    }
-  );
-});
-function SearchField({
-  value,
-  onChange,
-  placeholder,
-  className,
-  size = "default",
-  "aria-label": ariaLabel
-}) {
-  const heightClass = size === "lg" ? "h-11" : "h-10";
-  const iconSize = size === "lg" ? 16 : 16;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-2 rounded-md border border-border bg-card px-3 w-full focus-within:border-blue-400 focus-within:ring-[3px] focus-within:ring-blue-500/25 transition-all",
-        heightClass,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Search, { size: iconSize, className: "text-muted-foreground shrink-0", strokeWidth: 2.25 }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "search",
-            value,
-            onChange: (e) => onChange(e.target.value),
-            placeholder,
-            "aria-label": ariaLabel,
-            className: "flex-1 border-0 bg-transparent shadow-none focus-visible:ring-0 px-0 min-w-0 h-auto"
-          }
-        )
-      ]
-    }
-  );
-}
-function PageListSearchField({
-  value,
-  onChange,
-  placeholder,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    SearchField,
-    {
-      value,
-      onChange,
-      placeholder,
-      className
-    }
-  );
-}
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    PopoverPrimitive.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-white/10 p-4 shadow-md outline-hidden",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({ ...props }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
-}
-function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 function matchesCanvasResourceSearch(resourceName, planName, query) {
   const q = query.trim().toLowerCase();
   if (!q) return true;