jigsaw_engine 0.4.0

data/app/controllers/jigsaw/slot_templates_controller.rb

@@ -0,0 +1,71 @@
+module Jigsaw
+  class SlotTemplatesController < ApplicationController
+    skip_forgery_protection only: [:data_source, :render_source]
+    before_action :set_slot_template, only: [:show, :edit, :update, :destroy, :data_source, :render_source]
+
+    def index
+      @slot_templates = if params[:tag].present?
+        SlotTemplate.tagged_with(params[:tag])
+      else
+        SlotTemplate.all
+      end
+      @slot_templates = @slot_templates.order(:name)
+      @tags = SlotTemplate.tag_counts_on(:tags).order(:name)
+    end
+
+    def new
+      @slot_template = SlotTemplate.new
+    end
+
+    def create
+      @slot_template = SlotTemplate.new(slot_template_params)
+      if @slot_template.save
+        redirect_to slot_templates_path, notice: "Slot template created"
+      else
+        render :new, status: :unprocessable_entity
+      end
+    end
+
+    def show
+    end
+
+    def edit
+    end
+
+    def update
+      if @slot_template.update(slot_template_params)
+        head :ok
+      else
+        render json: { errors: @slot_template.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+
+    def destroy
+      @slot_template.destroy!
+      redirect_to slot_templates_path, notice: "Slot template deleted"
+    end
+
+    def data_source
+      response.headers["Content-Type"] = "text/javascript"
+      render plain: @slot_template.data_compiled_source || ""
+    end
+
+    def render_source
+      response.headers["Content-Type"] = "text/javascript"
+      render plain: @slot_template.render_compiled_source || ""
+    end
+
+    private
+
+      def set_slot_template
+        @slot_template = SlotTemplate.find(params[:id])
+      end
+
+      def slot_template_params
+        params.require(:slot_template).permit(
+          :name, :description, :thumbnail, :data_source,
+          :render_source, :render_language, :config, :tag_list
+        )
+      end
+  end
+end

data/app/controllers/jigsaw/slots_controller.rb

@@ -0,0 +1,54 @@
+module Jigsaw
+  class SlotsController < ApplicationController
+    skip_forgery_protection only: [:data_source, :render_source]
+    before_action :set_slot, only: [:edit, :update, :data_source, :render_source, :unlink_template, :link_template]
+
+    def index
+      @slots = Slot.all
+    end
+
+    def edit
+    end
+
+    def update
+      if @slot.update(slot_params)
+        head :ok
+      else
+        render json: { errors: @slot.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+
+    def data_source
+      response.headers["Content-Type"] = "text/javascript"
+      render plain: @slot.effective_data_compiled_source || ""
+    end
+
+    def render_source
+      response.headers["Content-Type"] = "text/javascript"
+      render plain: @slot.effective_render_compiled_source || ""
+    end
+
+    def unlink_template
+      @slot.unlink_from_template!
+      redirect_to edit_slot_path(@slot), notice: "Slot unlinked from template"
+    end
+
+    def link_template
+      slot_template = SlotTemplate.find(params[:slot_template_id])
+      @slot.link_to_template!(slot_template)
+      redirect_to edit_slot_path(@slot), notice: "Slot linked to template: #{slot_template.name}"
+    end
+
+    private
+
+      def set_slot
+        @slot = Slot.find(params[:id])
+      end
+
+      def slot_params
+        params.require(:slot).permit(
+          :area_name, :data_source, :render_source, :render_language, :config
+        )
+      end
+  end
+end

data/app/helpers/jigsaw/custom_module_helper.rb

@@ -0,0 +1,7 @@
+module Jigsaw
+  module CustomModuleHelper
+    def CustomModule(**kwargs, &block)
+      output_buffer << render(CustomModuleComponent.new(**kwargs), &block)
+    end
+  end
+end

data/app/helpers/jigsaw/pages_helper.rb

@@ -0,0 +1,7 @@
+module Jigsaw
+  module PagesHelper
+    def custom_page_path(page)
+      "/#{page.path}"
+    end
+  end
+end

data/app/javascript/jigsaw/components/ui/button.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-whitespace-nowrap tw-rounded-md tw-text-sm tw-font-medium tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-1 focus-visible:tw-ring-ring disabled:tw-pointer-events-none disabled:tw-opacity-50 [&_svg]:tw-pointer-events-none [&_svg]:tw-size-4 [&_svg]:tw-shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "tw-bg-primary tw-text-primary-foreground tw-shadow hover:tw-bg-primary/90",
+        destructive: "tw-bg-destructive tw-text-destructive-foreground tw-shadow-sm hover:tw-bg-destructive/90",
+        outline: "tw-border tw-border-input tw-bg-background tw-shadow-sm hover:tw-bg-accent hover:tw-text-accent-foreground",
+        secondary: "tw-bg-secondary tw-text-secondary-foreground tw-shadow-sm hover:tw-bg-secondary/80",
+        ghost: "hover:tw-bg-accent hover:tw-text-accent-foreground",
+        link: "tw-text-primary tw-underline-offset-4 hover:tw-underline"
+      },
+      size: {
+        default: "tw-h-9 tw-px-4 tw-py-2",
+        sm: "tw-h-8 tw-rounded-md tw-px-3 tw-text-xs",
+        lg: "tw-h-10 tw-rounded-md tw-px-8",
+        icon: "tw-h-9 tw-w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};

data/app/javascript/jigsaw/components/ui/dropdown-menu.js

@@ -0,0 +1,157 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "tw-flex tw-cursor-default tw-select-none tw-items-center tw-gap-2 tw-rounded-sm tw-px-2 tw-py-1.5 tw-text-sm tw-outline-none focus:tw-bg-accent data-[state=open]:tw-bg-accent [&_svg]:tw-pointer-events-none [&_svg]:tw-size-4 [&_svg]:tw-shrink-0",
+      inset && "tw-pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "tw-ml-auto" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "tw-z-50 tw-min-w-[8rem] tw-overflow-hidden tw-rounded-md tw-border tw-bg-popover tw-p-1 tw-text-popover-foreground tw-shadow-lg data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 tw-origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "tw-z-50 tw-max-h-[var(--radix-dropdown-menu-content-available-height)] tw-min-w-[8rem] tw-overflow-y-auto tw-overflow-x-hidden tw-rounded-md tw-border tw-bg-popover tw-p-1 tw-text-popover-foreground tw-shadow-md",
+      "data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 tw-origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-gap-2 tw-rounded-sm tw-px-2 tw-py-1.5 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50 [&>svg]:tw-size-4 [&>svg]:tw-shrink-0",
+      inset && "tw-pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pl-8 tw-pr-2 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "tw-absolute tw-left-2 tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "tw-h-4 tw-w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pl-8 tw-pr-2 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "tw-absolute tw-left-2 tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "tw-h-2 tw-w-2 tw-fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "tw-px-2 tw-py-1.5 tw-text-sm tw-font-semibold",
+      inset && "tw-pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-tw-mx-1 tw-my-1 tw-h-px tw-bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("tw-ml-auto tw-text-xs tw-tracking-widest tw-opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};

data/app/javascript/jigsaw/components/ui/sheet.js

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+import { jsx, jsxs } from "react/jsx-runtime";
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "tw-fixed tw-inset-0 tw-z-50 tw-bg-black/80 data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "tw-fixed tw-z-50 tw-gap-4 tw-bg-background tw-p-6 tw-shadow-lg tw-transition tw-ease-in-out data-[state=closed]:tw-duration-300 data-[state=open]:tw-duration-500 data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out",
+  {
+    variants: {
+      side: {
+        top: "tw-inset-x-0 tw-top-0 tw-border-b data-[state=closed]:tw-slide-out-to-top data-[state=open]:tw-slide-in-from-top",
+        bottom: "tw-inset-x-0 tw-bottom-0 tw-border-t data-[state=closed]:tw-slide-out-to-bottom data-[state=open]:tw-slide-in-from-bottom",
+        left: "tw-inset-y-0 tw-left-0 tw-h-full tw-w-3/4 tw-border-r data-[state=closed]:tw-slide-out-to-left data-[state=open]:tw-slide-in-from-left sm:tw-max-w-sm",
+        right: "tw-inset-y-0 tw-right-0 tw-h-full tw-w-3/4 tw-border-l data-[state=closed]:tw-slide-out-to-right data-[state=open]:tw-slide-in-from-right sm:tw-max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "tw-absolute tw-right-4 tw-top-4 tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-secondary", children: [
+          /* @__PURE__ */ jsx(X, { className: "tw-h-4 tw-w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "tw-sr-only", children: "Close" })
+        ] }),
+        children
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw-flex tw-flex-col tw-space-y-2 tw-text-center sm:tw-text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw-flex tw-flex-col-reverse sm:tw-flex-row sm:tw-justify-end sm:tw-space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("tw-text-lg tw-font-semibold tw-text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("tw-text-sm tw-text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+};

data/app/javascript/jigsaw/components/ui/utils.js

@@ -0,0 +1,8 @@
+// ../../../../../tmp/shadcn20260506-64878-91ocbs/src/lib/utils.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+export {
+  cn
+};

data/app/javascript/jigsaw/controllers/custom_module_controller.js

@@ -0,0 +1,75 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    id:           Number,
+    dataFnUrl:    String,
+    renderFnUrl:  String,
+    config:       Object,
+    shares:       { type: Array, default: [] }
+  }
+
+  async connect() {
+    try {
+      console.log(`[custom-module #${this.idValue}] connect`, { dataFnUrl: this.dataFnUrlValue, renderFnUrl: this.renderFnUrlValue, shares: this.sharesValue })
+
+      if (!this.dataFnUrlValue || !this.renderFnUrlValue) {
+        console.log(`[custom-module #${this.idValue}] skipping - no URLs`)
+        return
+      }
+
+      const pageEl = this.element.closest("[data-controller~='custom-page']")
+      if (!pageEl) {
+        console.log(`[custom-module #${this.idValue}] skipping - no page element`)
+        return
+      }
+
+      if (!pageEl.page) {
+        console.log(`[custom-module #${this.idValue}] waiting for page controller...`)
+        await new Promise(resolve => {
+          const interval = setInterval(() => {
+            if (pageEl.page) { clearInterval(interval); resolve() }
+          }, 10)
+        })
+      }
+      this.page = pageEl.page
+      console.log(`[custom-module #${this.idValue}] page ready, loading shared stores...`, this.sharesValue)
+
+      this.shared = {}
+      for (const key of this.sharesValue) {
+        console.log(`[custom-module #${this.idValue}] loading store "${key}"...`)
+        this.shared[key] = await this.page.findOrCreateStore(key)
+        console.log(`[custom-module #${this.idValue}] store "${key}" loaded`)
+      }
+
+      console.log(`[custom-module #${this.idValue}] importing data module...`)
+      const dataModule = await import(this.dataFnUrlValue)
+      console.log(`[custom-module #${this.idValue}] data module imported`)
+
+      console.log(`[custom-module #${this.idValue}] importing render module...`)
+      const renderModule = await import(this.renderFnUrlValue)
+      console.log(`[custom-module #${this.idValue}] render module imported`)
+
+      this.fetchData = dataModule.default.bind(this)
+      this.render    = renderModule.default.bind(this)
+
+      this.element.module = this
+
+      for (const key of this.sharesValue) {
+        this.shared[key].dpp.on("save", () => this.load())
+      }
+
+      console.log(`[custom-module #${this.idValue}] calling load()...`)
+      await this.load()
+      console.log(`[custom-module #${this.idValue}] load() complete`)
+    } catch (err) {
+      console.error(`[custom-module #${this.idValue}] ERROR:`, err)
+    }
+  }
+
+  async load() {
+    const data = await this.fetchData(this.shared, this.configValue)
+    this.lastData = data
+    this.render(data)
+  }
+}

data/app/javascript/jigsaw/controllers/custom_page_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { pageId: String }
+
+  connect() {
+    this.stores = new Map()
+    this.element.page = {
+      findOrCreateStore: (key) => this.findOrCreateStore(key)
+    }
+  }
+
+  async findOrCreateStore(key) {
+    if (this.stores.has(key)) return this.stores.get(key)
+
+    const { createDPP } = await import("dpp")
+    const dpp = await createDPP({ storeName: `page-${this.pageIdValue}:${key}` })
+    const proxy = await dpp.start()
+    const entry = { dpp, proxy }
+    this.stores.set(key, entry)
+    return entry
+  }
+}

data/app/javascript/jigsaw/controllers/flyout_resize_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { key: { type: String, default: "flyout-width" } }
+
+  connect() {
+    this.flyout = this.element.closest(".ui.flyout")
+    if (!this.flyout) return
+
+    this.handle = document.createElement("div")
+    this.handle.style.cssText = "position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 1000;"
+    this.flyout.prepend(this.handle)
+
+    const saved = localStorage.getItem(this.keyValue)
+    if (saved) this.flyout.style.width = saved
+
+    this._onMouseDown = this._onMouseDown.bind(this)
+    this._onMouseMove = this._onMouseMove.bind(this)
+    this._onMouseUp = this._onMouseUp.bind(this)
+
+    this.handle.addEventListener("mousedown", this._onMouseDown)
+  }
+
+  _onMouseDown(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragging = true
+    // Prevent Fomantic from closing the flyout on click outside during drag
+    this._dimmer = document.querySelector(".ui.dimmer")
+    if (this._dimmer) this._dimmer.style.pointerEvents = "none"
+    document.addEventListener("mousemove", this._onMouseMove, true)
+    document.addEventListener("mouseup", this._onMouseUp, true)
+  }
+
+  _onMouseMove(e) {
+    if (!this.dragging) return
+    e.preventDefault()
+    e.stopPropagation()
+    const width = window.innerWidth - e.clientX
+    if (width >= 200 && width <= window.innerWidth * 0.9) {
+      this.flyout.style.width = width + "px"
+    }
+  }
+
+  _onMouseUp(e) {
+    if (!this.dragging) return
+    e.stopPropagation()
+    this.dragging = false
+    if (this._dimmer) this._dimmer.style.pointerEvents = ""
+    document.removeEventListener("mousemove", this._onMouseMove, true)
+    document.removeEventListener("mouseup", this._onMouseUp, true)
+    localStorage.setItem(this.keyValue, this.flyout.style.width)
+  }
+
+  disconnect() {
+    this.handle?.remove()
+    document.removeEventListener("mousemove", this._onMouseMove)
+    document.removeEventListener("mouseup", this._onMouseUp)
+  }
+}