@spacesync/client 0.1.0

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function ImagePickerField({ label, value, onChange, description, previewAlt, }: {
+    label?: string;
+    value?: string;
+    onChange: (value: string) => void;
+    description?: string;
+    previewAlt?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { ImagePickerField };

package/dist/image-picker-field.js

@@ -0,0 +1,135 @@
+import * as React from 'react';
+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';
+
+// 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,
+  description,
+  previewAlt = "Selected image"
+}) {
+  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);
+  };
+  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 }),
+    value ? /* @__PURE__ */ jsxs("div", { className: "max-w-sm overflow-hidden rounded-xl border border-border bg-card", children: [
+      /* @__PURE__ */ jsx("img", { src: value, alt: previewAlt, className: "aspect-[4/3] w-full object-cover" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            onClick: () => inputRef.current?.click(),
+            className: "h-auto gap-1.5 p-0 text-xs font-medium text-blue-600 dark:text-blue-400",
+            children: [
+              /* @__PURE__ */ jsx(ImagePlus, { size: 13 }),
+              "Change image"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            onClick: () => onChange(""),
+            className: "h-auto gap-1.5 p-0 text-xs font-medium text-red-600",
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { size: 13 }),
+              "Remove"
+            ]
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        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(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        className: "hidden",
+        onChange: (event) => {
+          handleFileChange(event.target.files);
+          event.target.value = "";
+        }
+      }
+    )
+  ] });
+}
+
+export { ImagePickerField };
+//# sourceMappingURL=image-picker-field.js.map
+//# sourceMappingURL=image-picker-field.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type LayoutCanvasResourceType = "desks" | "rooms" | "other";
+interface LayoutCanvasRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface LayoutCanvasFloorLayout {
+    placedItems: Record<string, LayoutCanvasRect>;
+    bgImage: string | null;
+    canvasWidth?: number;
+    canvasHeight?: number;
+}
+interface LayoutCanvasPlanHint {
+    id: string;
+    name: string;
+    color?: string;
+}
+
+interface LayoutCanvasViewRow {
+    resource: {
+        id: string;
+        name: string;
+        pricingPlanId: string;
+        resourceType: LayoutCanvasResourceType;
+        totalSlots?: number;
+    };
+    merged: {
+        occupied: boolean;
+        manual?: boolean;
+        expectedFreeLabel?: string;
+    };
+    plan?: LayoutCanvasPlanHint;
+}
+interface LayoutCanvasResourceQuickBook {
+    /** When omitted, popover shows that booking is unavailable for this member. */
+    onBook?: (resourceId: string) => void;
+    /** Optional href for the book action (middle-click / fallback). */
+    getBookingHref?: (resourceId: string) => string;
+}
+interface LayoutCanvasViewProps {
+    layout: LayoutCanvasFloorLayout;
+    rows: LayoutCanvasViewRow[];
+    onResourceSelect?: (id: string) => void;
+    /** Hover/tap popover with a quick book action (member live space). */
+    resourceQuickBook?: LayoutCanvasResourceQuickBook;
+    /** When set with `onSearchQueryChange`, shows a search bar and dims non-matching resources. */
+    searchQuery?: string;
+    onSearchQueryChange?: (value: string) => void;
+    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;
+
+export { type LayoutCanvasResourceQuickBook, LayoutCanvasView, type LayoutCanvasViewProps, type LayoutCanvasViewRow, matchesCanvasResourceSearch };