@ynput/ayon-addon-dev 0.0.0-stage → 0.1.0

package/dist/shell/index.js

@@ -0,0 +1,1635 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useCallback, createContext, useContext, useState, useMemo, useEffect, useSyncExternalStore, Component, StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { provideHost, isKnownSlot, getRegistry, contributionTitle, getHost, registerManifest, setManifestsLoading } from "@ynput/ayon-addon/host";
+import { useGetProjectFoldersQuery, useGetCurrentUserQuery, useListProjectsQuery, useGetEntitiesDetailsPanelQuery, useGetProjectQuery, useGetUsersAssigneeQuery, createStandaloneStore } from "@ynput/ayon-frontend-shared/api";
+import { SlicerHost, ProjectPageLayoutHost, JsonViewer, AddonButton, useAddonCustomizeSections, useAddonTableShortcuts, SettingsPanel, AddonDialog, useStudioPageSlotContext, useProjectPageSlotContext, SplitterStyles, LoginPage } from "@ynput/ayon-frontend-shared/components";
+import { useGlobalContext, usePowerpack, useMenuContext, ProjectContextProvider, ProjectFoldersContextProvider, useSettingsPanel, useScopedDetailsPanel, EntityUpdatesProvider, GlobalProvider, PowerpackProvider, MenuProvider, URIProvider, DetailsPanelProvider, PiPProvider, DeleteEntitiesProvider, SettingsPanelProvider } from "@ynput/ayon-frontend-shared/context";
+import { buildProjectsTableData, ProjectsTable, PROJECTS_LIST_MENU_ID, parseProjectFolderRowId } from "@ynput/ayon-frontend-shared/ProjectsTable";
+import { getProjectDisplayName, clearAccessToken, storeAccessToken } from "@ynput/ayon-frontend-shared/util";
+import { Button, Icon, Dropdown, Dialog, InputText } from "@ynput/ayon-react-components";
+import { useContributions, prefetchPiece, runContribution, ContributionView } from "@ynput/ayon-addon";
+import { useCreateContextMenu, ContextMenuProvider, GlobalContextMenu } from "@ynput/ayon-frontend-shared/ContextMenu";
+import { useDispatch, Provider } from "react-redux";
+import { BrowserRouter, useNavigate, useSearchParams, useParams, useLocation } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useAddonTableColumns, useAddonEntityMenuItems, AddonColumnDataScope, ProjectDataProvider } from "@ynput/ayon-frontend-shared/ProjectTreeTable";
+import { SLOT_DOCS } from "@ynput/ayon-addon/check";
+import { EntityPickerDialog } from "@ynput/ayon-frontend-shared/EntityPickerDialog";
+import { DetailsPanel } from "@ynput/ayon-frontend-shared/DetailsPanel";
+import { NewEntityProvider } from "@ynput/ayon-frontend-shared/NewEntity";
+import { SlicerProvider, useSlicerContext } from "@ynput/ayon-frontend-shared/Slicer";
+import { ViewsProvider } from "@ynput/ayon-frontend-shared/Views";
+import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
+const inMenu = (item, menu) => {
+  const kinds = item.in;
+  return !kinds?.length || kinds.includes(menu);
+};
+const useShellMenu = (slot, makeContext, applies = () => true) => {
+  const { contributions } = useContributions(slot);
+  const [openMenu] = useCreateContextMenu([]);
+  const itemsFor = useCallback(
+    (menu, extra) => {
+      const context = { ...makeContext(menu), ...extra };
+      return contributions.filter((item) => inMenu(item, menu) && applies(item)).map((item) => {
+        prefetchPiece(item.run);
+        return {
+          id: item.key,
+          label: item.label,
+          icon: item.icon,
+          command: () => runContribution(item, context)
+        };
+      });
+    },
+    [contributions, makeContext, applies]
+  );
+  const openContextMenu = (e, extra) => {
+    e.preventDefault();
+    const items = itemsFor("context", extra);
+    if (items.length) openMenu(e, items);
+  };
+  const hasDropdownItems = contributions.some(
+    (item) => inMenu(item, "dropdown") && applies(item)
+  );
+  const dropdown = hasDropdownItems ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: "more_vert",
+      variant: "text",
+      "data-shell-menu": "dropdown",
+      onClick: (e) => openMenu(e, itemsFor("dropdown"))
+    }
+  ) : null;
+  return { openContextMenu, dropdown, itemsFor };
+};
+const useUser = () => {
+  const { data: user2 } = useGetCurrentUserQuery();
+  return useMemo(() => {
+    if (!user2?.name) return void 0;
+    const data = user2.data || {};
+    const isAdmin = !!data.isAdmin || !!data.isService;
+    return {
+      name: user2.name,
+      fullName: user2.attrib?.fullName || void 0,
+      email: user2.attrib?.email || void 0,
+      isAdmin,
+      isManager: isAdmin || !!data.isManager,
+      isGuest: !!data.isGuest,
+      isDeveloper: !!user2.attrib?.developerMode || !!data.isService
+    };
+  }, [user2]);
+};
+const StudioSelectionContext = createContext(null);
+const StudioPageLayout = ({ sidebar, children }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", width: "100%", height: "100%", minHeight: 0 }, children: [
+  sidebar && /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: 240,
+        flexShrink: 0,
+        overflow: "auto",
+        borderRight: "1px solid var(--md-sys-color-outline-variant)"
+      },
+      children: sidebar
+    }
+  ),
+  /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0, overflow: "hidden", display: "flex" }, children })
+] });
+const ProjectList = ({ multiSelect = false }) => {
+  const studio = useContext(StudioSelectionContext);
+  const { projects: allProjects, isLoading } = useGlobalContext();
+  const { powerLicense } = usePowerpack();
+  const { data: folders } = useGetProjectFoldersQuery();
+  const { toggleMenuOpen } = useMenuContext();
+  const [expanded, setExpanded] = useState({});
+  const [search, setSearch] = useState();
+  const selection = useMemo(() => studio?.selection || [], [studio?.selection]);
+  const projectNamesOf = (ids) => ids.filter((id) => !parseProjectFolderRowId(id));
+  const { itemsFor } = useShellMenu("projectList.menuItem", (menu) => ({
+    projectNames: projectNamesOf(selection),
+    menu
+  }));
+  const projects = useMemo(
+    () => [...allProjects.active].sort(
+      (a, b) => getProjectDisplayName(a).localeCompare(getProjectDisplayName(b))
+    ),
+    [allProjects.active]
+  );
+  const showFolders = !search && powerLicense;
+  const data = useMemo(
+    () => buildProjectsTableData(projects, showFolders ? folders : [], true, powerLicense),
+    [projects, folders, showFolders, powerLicense]
+  );
+  const onSelect = studio?.onSelect;
+  useEffect(() => {
+    if (onSelect && !selection.length && projects.length) onSelect([projects[0].name]);
+  }, [onSelect, selection, projects]);
+  if (!studio) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", className: "ayon-addon-error", children: "ProjectList only works on a studio page." });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-shell-surface": "project-list", style: { display: "flex", height: "100%" }, children: /* @__PURE__ */ jsx(
+    ProjectsTable,
+    {
+      data,
+      isLoading: isLoading.projects,
+      search,
+      onSearch: setSearch,
+      selection,
+      onSelect: studio.onSelect,
+      onRowSelectionChange: (rows) => studio.onSelect(Object.keys(rows).filter((id) => rows[id])),
+      rowPinning: [],
+      expanded,
+      setExpanded,
+      multiSelect,
+      hiddenButtons: multiSelect ? [] : ["select-all"],
+      onSelectAll: () => studio.onSelect(selection.length === projects.length ? [] : projects.map((p) => p.name)),
+      toggleMenu: (open = true) => toggleMenuOpen(open ? PROJECTS_LIST_MENU_ID : false),
+      buildMenuItems: () => itemsFor("dropdown").map(({ command, ...item }) => ({ ...item, onClick: command })),
+      rowContextMenuBuilders: [
+        (_e, context) => itemsFor("context", { projectNames: projectNamesOf(context.selectedRows) })
+      ]
+    }
+  ) });
+};
+const provideShellHost = () => provideHost({
+  useUser,
+  components: {
+    ProjectPageLayout: ProjectPageLayoutHost,
+    Slicer: SlicerHost,
+    StudioPageLayout,
+    ProjectList
+  }
+});
+const StudioSelectionProvider = ({
+  value,
+  children
+}) => /* @__PURE__ */ jsx(StudioSelectionContext.Provider, { value, children });
+const originalFetch = window.fetch.bind(window);
+const PREVIEW_USER = {
+  name: "preview",
+  attrib: { fullName: "Preview user", email: "preview@example.com" },
+  data: { isAdmin: true, isManager: true, isGuest: false },
+  uiExposureLevel: 1e3
+};
+const APP_ANSWERS = {
+  "/api/users/me": PREVIEW_USER,
+  "/api/info": {
+    version: "preview",
+    user: PREVIEW_USER,
+    attributes: [],
+    sites: [],
+    ssoOptions: [],
+    frontendFlags: [],
+    extras: "",
+    disableChangelog: true
+  },
+  "/api/projects": { detail: "", count: 0, projects: [] },
+  "/api/connect": { connected: false, offlineMode: true }
+};
+const appPath = (key) => {
+  const match = key.match(/^GET ([^?]+)/);
+  return match && match[1] in APP_ANSWERS ? match[1] : void 0;
+};
+const recorded = /* @__PURE__ */ new Map();
+let fixture;
+const unmatched = /* @__PURE__ */ new Set();
+const used = /* @__PURE__ */ new Set();
+const listeners = /* @__PURE__ */ new Set();
+const isAyonRequest = (url) => url.origin === window.location.origin && (url.pathname.startsWith("/api") || url.pathname.startsWith("/graphql"));
+const requestKey = async (url, method, body) => {
+  if (url.pathname.startsWith("/graphql") && typeof body === "string") {
+    try {
+      const { operationName, query } = JSON.parse(body);
+      const name = operationName || query?.match(/(?:query|mutation)\s+(\w+)/)?.[1];
+      if (name) return `graphql ${name}`;
+    } catch {
+    }
+  }
+  return `${method.toUpperCase()} ${url.pathname}${url.search}`;
+};
+const toRequest = (input, init) => {
+  const request = input instanceof Request ? input : void 0;
+  const url = new URL(request ? request.url : String(input), window.location.href);
+  const method = init?.method || request?.method || "GET";
+  return { url, method };
+};
+const readBody = async (input, init) => {
+  if (init?.body !== void 0) return init.body;
+  if (input instanceof Request && input.method !== "GET") return input.clone().text();
+  return void 0;
+};
+const previewAnswer = (key) => {
+  const app = appPath(key);
+  const answer = fixture?.responses[key] || (app ? { status: 200, body: APP_ANSWERS[app] } : void 0);
+  if (!answer) {
+    unmatched.add(key);
+    listeners.forEach((listener) => listener());
+    console.warn(`[ayon-addon preview] no fixture answer for ${key}`);
+    return { status: 404, body: { detail: `no fixture answer for ${key}` } };
+  }
+  if (fixture?.responses[key]) used.add(key);
+  return answer;
+};
+const OriginalXHR = window.XMLHttpRequest;
+class PreviewXHR extends OriginalXHR {
+  ayonRequest;
+  open(method, url, ...rest) {
+    const target = new URL(String(url), window.location.href);
+    this.ayonRequest = isAyonRequest(target) ? { url: target, method } : void 0;
+    return super.open(method, url, ...rest);
+  }
+  send(body) {
+    const request = this.ayonRequest;
+    if (!request) return super.send(body);
+    void requestKey(request.url, request.method, body).then((key) => {
+      const { status, body: answer } = previewAnswer(key);
+      const text = JSON.stringify(answer);
+      const responses = {
+        readyState: 4,
+        status,
+        statusText: status === 200 ? "OK" : "Not Found",
+        responseURL: request.url.href,
+        responseText: text,
+        response: this.responseType === "json" ? answer : text
+      };
+      for (const [name, value] of Object.entries(responses)) {
+        Object.defineProperty(this, name, { value, configurable: true });
+      }
+      this.getAllResponseHeaders = () => "content-type: application/json\r\n";
+      this.getResponseHeader = (name) => name.toLowerCase() === "content-type" ? "application/json" : null;
+      for (const type of ["readystatechange", "load", "loadend"]) this.dispatchEvent(new Event(type));
+    });
+  }
+}
+const installNetwork = (mode) => {
+  if (mode === "preview") window.XMLHttpRequest = PreviewXHR;
+  window.fetch = async (input, init) => {
+    const { url, method } = toRequest(input, init);
+    if (!isAyonRequest(url)) return originalFetch(input, init);
+    const key = await requestKey(url, method, await readBody(input, init));
+    if (mode === "preview") {
+      const answer = previewAnswer(key);
+      return new Response(JSON.stringify(answer.body), {
+        status: answer.status,
+        headers: { "Content-Type": "application/json" }
+      });
+    }
+    const response = await originalFetch(input, init);
+    if (response.headers.get("Content-Type")?.includes("application/json")) {
+      response.clone().json().then((body) => recorded.set(key, { status: response.status, body })).catch(() => void 0);
+    }
+    return response;
+  };
+};
+const getFixture = () => fixture;
+const setFixture = (next) => {
+  fixture = next;
+  unmatched.clear();
+  used.clear();
+};
+const getRecorded = () => Object.fromEntries([...recorded].filter(([key]) => !appPath(key)));
+const getUnmatched = () => [...unmatched];
+const getUsed = () => [...used];
+const onUnmatched = (listener) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const PARAMS = {
+  slot: "slot",
+  id: "contribution",
+  project: "ctxProject",
+  projects: "ctxProjects",
+  entities: "ctxEntities",
+  entityType: "ctxEntityType",
+  page: "ctxPage",
+  preview: "preview"
+};
+const PAGES = ["overview", "products", "lists"];
+const parseEntities = (value, projectName) => (value || "").split(",").map((part) => part.trim()).filter(Boolean).flatMap((part) => {
+  const [entityType, id, ...name] = part.split(":");
+  if (!entityType || !id || !projectName) return [];
+  return [{ entityType, id, projectName, name: name.join(":") || void 0 }];
+});
+const readSelection = (search = window.location.search) => {
+  const params = new URLSearchParams(search);
+  const slot = params.get(PARAMS.slot) || void 0;
+  const projectName = params.get(PARAMS.project) || void 0;
+  const page = params.get(PARAMS.page);
+  const entities = parseEntities(params.get(PARAMS.entities), projectName);
+  return {
+    slot: slot && isKnownSlot(slot) ? slot : void 0,
+    id: params.get(PARAMS.id) || void 0,
+    projectName,
+    projectNames: params.get(PARAMS.projects)?.split(",").filter(Boolean),
+    entityType: entities[0]?.entityType || params.get(PARAMS.entityType) || void 0,
+    entities,
+    page: page && PAGES.includes(page) ? page : void 0,
+    preview: params.get(PARAMS.preview) || void 0
+  };
+};
+const writeSelection = (selection) => {
+  const params = new URLSearchParams(window.location.search);
+  const set = (name, value) => value ? params.set(name, value) : params.delete(name);
+  set(PARAMS.preview, selection.preview);
+  set(PARAMS.slot, selection.slot);
+  set(PARAMS.id, selection.id);
+  set(PARAMS.project, selection.projectName);
+  set(PARAMS.projects, selection.projectNames?.join(",") || void 0);
+  set(PARAMS.page, selection.page);
+  set(
+    PARAMS.entities,
+    selection.entities.map((entity) => `${entity.entityType}:${entity.id}`).join(",") || void 0
+  );
+  set(PARAMS.entityType, selection.entities.length ? void 0 : selection.entityType);
+  const search = params.toString();
+  window.history.replaceState(
+    window.history.state,
+    "",
+    `${window.location.pathname}${search ? `?${search}` : ""}`
+  );
+};
+const SLOT_AREAS = [
+  {
+    label: "App header",
+    icon: "web_asset",
+    sections: [{ slots: [{ slot: "header.item", label: "Items" }] }]
+  },
+  {
+    label: "Studio",
+    icon: "home",
+    sections: [
+      { slots: [{ slot: "studio.page", label: "Pages" }] },
+      { label: "Project list", slots: [{ slot: "projectList.menuItem", label: "Menu" }] }
+    ]
+  },
+  {
+    label: "Project",
+    icon: "folder_open",
+    sections: [
+      { slots: [{ slot: "project.page", label: "Pages" }] },
+      { label: "Slicer", slots: [{ slot: "slicer.menuItem", label: "Menu" }] },
+      {
+        label: "Tables",
+        slots: [
+          { slot: "tableColumn", label: "Columns" },
+          { slot: "entityMenuItem", label: "Cell menu" },
+          { slot: "table.shortcut", label: "Shortcuts" },
+          { slot: "projectTable.toolbarItem", label: "Toolbar" },
+          { slot: "projectTable.customizeSection", label: "Customize panel" }
+        ]
+      }
+    ]
+  },
+  {
+    label: "Details panel",
+    icon: "dock_to_left",
+    sections: [
+      {
+        slots: [
+          { slot: "detailsPanel.tab", label: "Tabs" },
+          { slot: "detailsPanel.menuItem", label: "More menu" }
+        ]
+      }
+    ]
+  }
+];
+const slotPath = (slot) => {
+  for (const area of SLOT_AREAS) {
+    for (const section of area.sections) {
+      const found = section.slots.find((s) => s.slot === slot);
+      if (found) return [area.label, ...section.label ? [section.label] : [], found.label];
+    }
+  }
+  return ["Other", slot];
+};
+const slotIcon = (slot) => SLOT_AREAS.find((area) => area.sections.some((s) => s.slots.some((x) => x.slot === slot)))?.icon || "extension";
+const NO_PROJECT = ["studio.page", "header.item", "projectList.menuItem"];
+const PROJECTS = ["studio.page", "projectList.menuItem"];
+const ENTITIES = [
+  "detailsPanel.tab",
+  "detailsPanel.menuItem",
+  "entityMenuItem",
+  "tableColumn",
+  "table.shortcut"
+];
+const TABLE_PAGE = [
+  "entityMenuItem",
+  "table.shortcut",
+  "tableColumn",
+  "projectTable.toolbarItem",
+  "projectTable.customizeSection"
+];
+const RUN = [
+  "detailsPanel.menuItem",
+  "projectList.menuItem",
+  "slicer.menuItem",
+  "entityMenuItem",
+  "table.shortcut"
+];
+const needsProject = (slot) => !!slot && !NO_PROJECT.includes(slot);
+const needsProjects = (slot) => !!slot && PROJECTS.includes(slot);
+const needsEntities = (slot) => !!slot && ENTITIES.includes(slot);
+const needsTablePage = (slot) => !!slot && TABLE_PAGE.includes(slot);
+const isMenuSlot = (slot) => !!slot && RUN.includes(slot);
+const ENTITY_TYPES = ["folder", "task", "product", "version"];
+let current = {
+  selection: { entities: [] },
+  mode: "live"
+};
+let stageContext;
+let stageRun;
+let stageReady = false;
+let user;
+const jsonSafe = (value) => JSON.parse(
+  JSON.stringify(
+    value,
+    (_key, item) => typeof item === "function" || item instanceof Element ? void 0 : item
+  )
+);
+const stageListeners = /* @__PURE__ */ new Set();
+const subscribeStage = (listener) => {
+  stageListeners.add(listener);
+  return () => {
+    stageListeners.delete(listener);
+  };
+};
+const getStageContext = () => stageContext;
+const publish = () => {
+  window.__AYON_ADDON_SHELL__ = {
+    ready: stageReady,
+    mode: current.mode,
+    selection: current.selection,
+    unmatched: getUnmatched(),
+    get used() {
+      return getUsed();
+    },
+    fixture: () => {
+      const { slot, id } = current.selection;
+      if (!slot || !id || !stageContext) return void 0;
+      return { slot, id, context: jsonSafe(stageContext), user, responses: getRecorded() };
+    },
+    run: async () => {
+      if (!stageRun) throw new Error("the selected contribution has no run piece");
+      await stageRun();
+    }
+  };
+};
+const setStatus = (next) => {
+  current = { ...current, ...next };
+  publish();
+};
+const setStage = (stage) => {
+  stageContext = stage.context;
+  stageRun = stage.run;
+  stageReady = stage.ready && !getRegistry().isLoading;
+  publish();
+  stageListeners.forEach((listener) => listener());
+};
+const idOf$1 = (contribution) => contribution.id;
+const showContext = (context) => context ? JSON.stringify(
+  context,
+  (_key, value) => typeof value === "function" ? `ƒ ${value.name || "function"}` : value instanceof Element ? `<${value.tagName.toLowerCase()}>` : value,
+  2
+) : "—";
+const Contribution = ({
+  contribution,
+  selected,
+  onClick
+}) => {
+  const { icon } = contribution;
+  const id = idOf$1(contribution);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: `contribution${selected ? " selected" : ""}`,
+      "data-contribution": `${contribution.slot}:${id}`,
+      title: id,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: icon || "extension" }),
+        /* @__PURE__ */ jsx("span", { children: contributionTitle(contribution) })
+      ]
+    }
+  );
+};
+const Contributions = ({ selection, onChange }) => {
+  const { contributions, skipped } = getRegistry();
+  const [collapsed, setCollapsed] = useState([]);
+  const known = SLOT_AREAS.flatMap((area) => area.sections.flatMap((s) => s.slots.map((x) => x.slot)));
+  const other = [...new Set(contributions.map((c) => c.slot))].filter((slot) => !known.includes(slot));
+  const areas = other.length ? [
+    ...SLOT_AREAS,
+    {
+      label: "Other",
+      icon: "extension",
+      sections: [{ label: void 0, slots: other.map((slot) => ({ slot, label: slot })) }]
+    }
+  ] : SLOT_AREAS;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    areas.map((area) => {
+      const slots = area.sections.flatMap(
+        (section) => section.slots.map(({ slot, label }) => ({
+          slot,
+          label,
+          section: section.label,
+          items: contributions.filter((c) => c.slot === slot)
+        })).filter(({ items }) => items.length)
+      );
+      if (!slots.length) return null;
+      const isCollapsed = collapsed.includes(area.label);
+      const count = slots.reduce((sum, { items }) => sum + items.length, 0);
+      const slotCount = area.sections.reduce((sum, section) => sum + section.slots.length, 0);
+      return /* @__PURE__ */ jsxs("section", { className: "ayon-shell-area", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "ayon-shell-area-header",
+            "aria-expanded": !isCollapsed,
+            onClick: () => setCollapsed(
+              isCollapsed ? collapsed.filter((g) => g !== area.label) : [...collapsed, area.label]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: area.icon }),
+              /* @__PURE__ */ jsx("span", { children: area.label }),
+              /* @__PURE__ */ jsx("small", { children: count }),
+              /* @__PURE__ */ jsx(Icon, { icon: isCollapsed ? "expand_more" : "expand_less", className: "toggle" })
+            ]
+          }
+        ),
+        !isCollapsed && slots.map(({ slot, label, section, items }) => /* @__PURE__ */ jsxs("div", { className: "ayon-shell-slot", children: [
+          slotCount > 1 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ayon-shell-slot-label",
+              title: `${slot}: ${SLOT_DOCS[slot]?.where || ""}`,
+              children: [
+                section && /* @__PURE__ */ jsx("span", { children: section }),
+                label
+              ]
+            }
+          ),
+          items.map((c) => /* @__PURE__ */ jsx(
+            Contribution,
+            {
+              contribution: c,
+              selected: selection.slot === slot && selection.id === idOf$1(c),
+              onClick: () => onChange({ ...selection, slot, id: idOf$1(c) })
+            },
+            c.key
+          ))
+        ] }, slot))
+      ] }, area.label);
+    }),
+    skipped.length > 0 && /* @__PURE__ */ jsxs("section", { className: "ayon-shell-area", children: [
+      /* @__PURE__ */ jsx("div", { className: "ayon-shell-slot-label", children: "Skipped" }),
+      skipped.map((s) => /* @__PURE__ */ jsxs("div", { className: "ayon-addon-error", role: "alert", children: [
+        s.slot,
+        " ",
+        s.id,
+        ": ",
+        s.reason
+      ] }, `${s.slot}:${s.id}`))
+    ] })
+  ] });
+};
+const Field = ({ label, children }) => /* @__PURE__ */ jsxs("div", { className: "ayon-shell-field", children: [
+  /* @__PURE__ */ jsx("label", { children: label }),
+  /* @__PURE__ */ jsx("div", { children })
+] });
+const ProjectPicker = ({ selection, onChange }) => {
+  const { data: projects = [] } = useListProjectsQuery({ active: true });
+  useEffect(() => {
+    if (!selection.projectName && projects.length) {
+      onChange({ ...selection, projectName: projects[0].name, entities: [] });
+    }
+  }, [projects, selection, onChange]);
+  return /* @__PURE__ */ jsx(Field, { label: "Project", children: /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      value: selection.projectName ? [selection.projectName] : [],
+      options: projects.map((p) => ({ value: p.name, label: p.name })),
+      search: true,
+      onChange: (added) => onChange({ ...selection, projectName: added[0], entities: [] })
+    }
+  ) });
+};
+const ProjectsPicker = ({ selection, onChange }) => {
+  const { data: projects = [] } = useListProjectsQuery({ active: true });
+  const value = selection.projectNames ?? (selection.projectName ? [selection.projectName] : []);
+  return /* @__PURE__ */ jsx(Field, { label: "Projects", children: /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      value,
+      options: projects.map((p) => ({ value: p.name, label: p.name })),
+      multiSelect: true,
+      search: true,
+      placeholder: "None selected",
+      onChange: (names) => onChange({ ...selection, projectNames: names })
+    }
+  ) });
+};
+const EntitiesPicker = ({ selection, onChange }) => {
+  const [picking, setPicking] = useState(false);
+  const entityType = selection.entityType || "task";
+  const { projectName, entities } = selection;
+  const { data: details = [] } = useGetEntitiesDetailsPanelQuery(
+    { entityType, entities: entities.map((e) => ({ id: e.id, projectName: e.projectName })) },
+    { skip: !entities.length || entities.some((e) => e.name) }
+  );
+  useEffect(() => {
+    if (!details.length) return;
+    const named = entities.map((entity) => {
+      const found = details.find(
+        (d) => d.id === entity.id
+      );
+      return found ? { ...entity, name: found.name, label: found.label || void 0 } : entity;
+    });
+    onChange({ ...selection, entities: named });
+  }, [details]);
+  if (!projectName) return null;
+  return /* @__PURE__ */ jsxs(Field, { label: "Entities", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ayon-shell-entities", children: [
+      /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          value: [entityType],
+          options: ENTITY_TYPES.map((type) => ({ value: type, label: type })),
+          onChange: (added) => onChange({ ...selection, entityType: added[0], entities: [] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: "ads_click",
+          label: entities.length ? "Change" : "Pick",
+          onClick: () => setPicking(true)
+        }
+      )
+    ] }),
+    entities.map((entity) => /* @__PURE__ */ jsxs("div", { className: "ayon-shell-entity", children: [
+      /* @__PURE__ */ jsx("span", { children: entity.label || entity.name || entity.id }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: "close",
+          variant: "text",
+          "aria-label": "Remove",
+          onClick: () => onChange({ ...selection, entities: entities.filter((e) => e.id !== entity.id) })
+        }
+      )
+    ] }, entity.id)),
+    picking && // the picker reads the project's folders, like on a project page
+    /* @__PURE__ */ jsx(ProjectContextProvider, { projectName, children: /* @__PURE__ */ jsx(ProjectFoldersContextProvider, { projectName, children: /* @__PURE__ */ jsx(
+      EntityPickerDialog,
+      {
+        projectName,
+        entityType,
+        isMultiSelect: true,
+        onClose: () => setPicking(false),
+        onSubmit: (ids) => {
+          setPicking(false);
+          const picked = ids.map((id) => ({ id, entityType, projectName }));
+          onChange({ ...selection, entityType, entities: picked });
+        }
+      }
+    ) }) })
+  ] });
+};
+const TablePage = ({ selection, onChange }) => /* @__PURE__ */ jsx(Field, { label: "Table", children: /* @__PURE__ */ jsx(
+  Dropdown,
+  {
+    value: [selection.page || "overview"],
+    options: ["overview", "products", "lists"].map((page) => ({ value: page, label: page })),
+    onChange: (added) => onChange({ ...selection, page: added[0] })
+  }
+) });
+const Fixtures = ({ mode, selection }) => {
+  const [open, setOpen] = useState(mode === "preview");
+  const [names, setNames] = useState([]);
+  const [name, setName] = useState("");
+  const [saved, setSaved] = useState();
+  const list = () => fetch("/__ayon-addon/fixtures").then((response) => response.ok ? response.json() : []).then(setNames).catch(() => setNames([]));
+  useEffect(() => {
+    list();
+  }, []);
+  const save = async () => {
+    const fixture2 = window.__AYON_ADDON_SHELL__?.fixture();
+    if (!fixture2 || !name) return;
+    const response = await fetch(`/__ayon-addon/fixtures/${encodeURIComponent(name)}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(fixture2, null, 2)
+    });
+    setSaved(response.ok ? `Saved dev/fixtures/${name}.json` : `Failed: ${response.status}`);
+    list();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ayon-shell-fixtures", children: [
+    /* @__PURE__ */ jsxs("button", { className: "ayon-shell-subheader", "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx("span", { className: "label", children: "Preview fixtures" }),
+      /* @__PURE__ */ jsx("small", { children: names.length || "" }),
+      /* @__PURE__ */ jsx(Icon, { icon: open ? "expand_less" : "expand_more" })
+    ] }),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("small", { className: "ayon-shell-note", children: "The context and server answers of a contribution, to render it without a server." }),
+      mode === "live" && selection.slot && selection.id && /* @__PURE__ */ jsxs("div", { className: "ayon-shell-entities", children: [
+        /* @__PURE__ */ jsx(
+          InputText,
+          {
+            value: name,
+            placeholder: `${selection.id}`,
+            onChange: (e) => setName(e.target.value.replace(/[^\w-]/g, ""))
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { icon: "save", label: "Save", disabled: !name, onClick: save })
+      ] }),
+      saved && /* @__PURE__ */ jsx("small", { className: "ayon-shell-note", children: saved }),
+      names.map((fixture2) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          className: `ayon-shell-link${fixture2 === selection.preview ? " selected" : ""}`,
+          href: `?preview=${encodeURIComponent(fixture2)}`,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "description" }),
+            fixture2
+          ]
+        },
+        fixture2
+      )),
+      selection.preview && /* @__PURE__ */ jsxs("a", { className: "ayon-shell-link", href: "?", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "arrow_back" }),
+        "Back to live"
+      ] })
+    ] })
+  ] });
+};
+const LiveStatus = ({ options }) => {
+  const { data: user2 } = useGetCurrentUserQuery();
+  return /* @__PURE__ */ jsxs("small", { title: `${user2?.name} at ${options.serverUrl}`, children: [
+    user2?.name,
+    " @ ",
+    options.serverUrl.replace(/^https?:\/\//, ""),
+    options.signedInWithKey ? " · API key" : "",
+    !options.signedInWithKey && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " · ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            clearAccessToken();
+            window.location.reload();
+          },
+          children: "sign out"
+        }
+      )
+    ] })
+  ] });
+};
+const NotInFixture = () => {
+  const unmatched2 = useSyncExternalStore(onUnmatched, () => getUnmatched().join("\n"));
+  if (!unmatched2) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ayon-shell-passed", children: [
+    /* @__PURE__ */ jsx("div", { className: "ayon-shell-subheader", children: /* @__PURE__ */ jsx("span", { className: "label", children: "Not in the fixture" }) }),
+    /* @__PURE__ */ jsx("pre", { className: "ayon-shell-code", children: unmatched2 })
+  ] });
+};
+const ContextPreview = () => {
+  const context = useSyncExternalStore(subscribeStage, getStageContext);
+  const [open, setOpen] = useState(false);
+  const text = showContext(context);
+  return /* @__PURE__ */ jsxs("div", { className: "ayon-shell-passed", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ayon-shell-subheader", children: [
+      /* @__PURE__ */ jsx("span", { className: "label", children: "Passed to the contribution" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: "open_in_full",
+          variant: "text",
+          "data-tooltip": "Show the whole context",
+          "aria-label": "Show the whole context",
+          disabled: !context,
+          onClick: () => setOpen(true)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "ayon-shell-context",
+        "data-shell-context": true,
+        title: "Show the whole context",
+        disabled: !context,
+        onClick: () => setOpen(true),
+        children: /* @__PURE__ */ jsx("pre", { className: "ayon-shell-code", children: text })
+      }
+    ),
+    open && context && /* @__PURE__ */ jsx(Dialog, { isOpen: true, header: "Context", size: "lg", onClose: () => setOpen(false), children: /* @__PURE__ */ jsx(JsonViewer, { value: JSON.parse(text), wrap: true }) })
+  ] });
+};
+const ContextPanel = ({ mode, selection, onChange }) => {
+  const contribution = getRegistry().contributions.find(
+    (c) => c.slot === selection.slot && idOf$1(c) === selection.id
+  );
+  const slot = contribution?.slot;
+  const live = mode === "live";
+  const pickers = live && !!slot && (needsProject(slot) || needsProjects(slot) || needsEntities(slot));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h3", { children: "Context" }),
+    !contribution ? /* @__PURE__ */ jsx("small", { className: "ayon-shell-note", children: "Pick a contribution." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      pickers ? /* @__PURE__ */ jsxs("div", { className: "ayon-shell-fields", children: [
+        needsProject(slot) && /* @__PURE__ */ jsx(ProjectPicker, { selection, onChange }),
+        needsProjects(slot) && /* @__PURE__ */ jsx(ProjectsPicker, { selection, onChange }),
+        needsEntities(slot) && /* @__PURE__ */ jsx(EntitiesPicker, { selection, onChange }),
+        needsTablePage(slot) && /* @__PURE__ */ jsx(TablePage, { selection, onChange })
+      ] }) : /* @__PURE__ */ jsx("small", { className: "ayon-shell-note", children: live ? "Nothing to pick for this slot." : "From the fixture." }),
+      isMenuSlot(slot) && /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: "play_arrow",
+          label: slot === "table.shortcut" ? "Press the shortcut" : "Run the menu item",
+          variant: "filled",
+          "data-shell-action": "run",
+          onClick: () => window.__AYON_ADDON_SHELL__?.run()
+        }
+      ),
+      /* @__PURE__ */ jsx(ContextPreview, {}),
+      !live && /* @__PURE__ */ jsx(NotInFixture, {})
+    ] }),
+    /* @__PURE__ */ jsx(Fixtures, { mode, selection })
+  ] });
+};
+const DevPanel = ({ options, mode, selection, onChange }) => {
+  useEffect(() => {
+    if (selection.slot) return;
+    const first = getRegistry().contributions[0];
+    if (first) onChange({ ...selection, slot: first.slot, id: first.id });
+  }, [selection, onChange]);
+  return /* @__PURE__ */ jsxs("aside", { className: "ayon-shell-panel", "data-shell-surface": "dev-panel", children: [
+    /* @__PURE__ */ jsxs("header", { className: "ayon-shell-panel-header", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: "extension" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          options.addon.name,
+          " ",
+          /* @__PURE__ */ jsx("span", { children: options.addon.version })
+        ] }),
+        mode === "live" ? /* @__PURE__ */ jsx(LiveStatus, { options }) : /* @__PURE__ */ jsxs("small", { children: [
+          "Preview: dev/fixtures/",
+          selection.preview,
+          ".json, no server"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Splitter,
+      {
+        layout: "vertical",
+        className: "ayon-shell-panel-split",
+        stateKey: "ayon-addon-shell-panel",
+        stateStorage: "local",
+        children: [
+          /* @__PURE__ */ jsxs(SplitterPanel, { size: 55, minSize: 10, className: "ayon-shell-section", children: [
+            /* @__PURE__ */ jsx("h3", { children: "Contributions" }),
+            /* @__PURE__ */ jsx(
+              Contributions,
+              {
+                selection,
+                onChange: mode === "preview" ? (next) => {
+                  window.location.href = `?slot=${next.slot}&contribution=${next.id}`;
+                } : onChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(SplitterPanel, { size: 45, minSize: 10, className: "ayon-shell-section", children: /* @__PURE__ */ jsx(ContextPanel, { mode, selection, onChange }) })
+        ]
+      }
+    )
+  ] });
+};
+const ButtonItem = ({
+  contribution,
+  context,
+  autoOpen,
+  onContext
+}) => {
+  const fields = contribution;
+  return /* @__PURE__ */ jsx(
+    AddonButton,
+    {
+      contribution,
+      context,
+      autoOpen,
+      onContext,
+      renderButton: ({ ref, active, onClick, onMouseEnter }) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          icon: fields.icon,
+          label: fields.label && !fields.icon ? fields.label : void 0,
+          "data-tooltip": fields.tooltip || fields.label,
+          variant: "text",
+          selected: active,
+          "data-contribution-button": contribution.key,
+          onClick,
+          onMouseEnter
+        }
+      )
+    }
+  );
+};
+const ShellTable = ({ page, entities, selected, onSelect }) => {
+  const { columns: addonColumns } = useAddonTableColumns(page);
+  const columns = useMemo(
+    () => [
+      {
+        id: "name",
+        header: "Name",
+        size: 260,
+        cell: ({ row }) => row.original.primary.label || row.original.primary.name
+      },
+      ...addonColumns.map((extra) => extra.column)
+    ],
+    [addonColumns]
+  );
+  const data = useMemo(
+    () => entities.map((entity) => ({
+      id: entity.id,
+      primary: {
+        id: entity.id,
+        entityType: entity.entityType,
+        name: entity.name || entity.id,
+        label: entity.label
+      }
+    })),
+    [entities]
+  );
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+    // AYON's table declares its own filter functions (ProjectTreeTable)
+    filterFns: {}
+  });
+  const buildAddonItems = useAddonEntityMenuItems(page);
+  const [openMenu] = useCreateContextMenu([]);
+  const isSelected = (id) => selected.some((entity) => entity.id === id);
+  const onContextMenu = (e, entity) => {
+    e.preventDefault();
+    const targets = isSelected(entity.id) ? selected : [entity];
+    if (!isSelected(entity.id)) onSelect([entity]);
+    const cells = targets.map((target) => ({
+      cellId: `${target.id}-name`,
+      entityId: target.id,
+      entityType: target.entityType,
+      isGroup: false,
+      data: { name: target.name, label: target.label }
+    }));
+    const cell = cells.find((c) => c.entityId === entity.id);
+    const items = buildAddonItems(e, cell, cells, {
+      selectedCells: cells.map((c) => c.cellId),
+      selectedRows: [],
+      selectedColumns: [],
+      selectedFullRows: [],
+      selectedGroups: []
+    }, {});
+    if (Array.isArray(items) && items.length) openMenu(e, items);
+  };
+  return /* @__PURE__ */ jsxs("table", { className: "ayon-shell-table", "data-shell-surface": "table", children: [
+    /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("tr", { children: group.headers.map((header) => /* @__PURE__ */ jsx("th", { style: { width: header.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, group.id)) }),
+    /* @__PURE__ */ jsx(
+      AddonColumnDataScope,
+      {
+        columns: table.getAllLeafColumns(),
+        entities: data.map((row) => row.primary),
+        children: /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => {
+          const entity = entities.find((e) => e.id === row.id);
+          return /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: isSelected(row.id) ? "selected" : void 0,
+              onClick: (e) => onSelect(
+                e.metaKey || e.ctrlKey ? isSelected(row.id) ? selected.filter((s) => s.id !== row.id) : [...selected, entity] : [entity]
+              ),
+              onContextMenu: (e) => onContextMenu(e, entity),
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: cell.column.id, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+            },
+            row.id
+          );
+        }) })
+      }
+    )
+  ] });
+};
+const FRAME_WIDTH = {
+  "detailsPanel.tab": 620,
+  "projectTable.customizeSection": 320
+};
+const PreviewStage = ({
+  contribution,
+  selection
+}) => {
+  const fixture2 = getFixture();
+  const context = useMemo(() => fixture2?.context || {}, [fixture2]);
+  const slot = contribution.slot;
+  const run = useCallback(
+    () => runContribution(contribution, context),
+    [contribution, context]
+  );
+  const onPopupContext = useCallback(
+    (popup) => setStage({ context: popup, ready: true }),
+    []
+  );
+  const isPopup = slot === "header.item" || slot === "projectTable.toolbarItem";
+  const isDialog = slot === "table.shortcut" && !!contribution.dialog;
+  const runs = isMenuSlot(slot) && !isDialog;
+  useEffect(() => {
+    if (!fixture2) return;
+    if (!isPopup) setStage({ context, ready: true, run: runs ? run : void 0 });
+  }, [fixture2, context, run, isPopup, runs]);
+  if (!fixture2) {
+    return /* @__PURE__ */ jsxs("div", { role: "alert", className: "ayon-addon-error", children: [
+      "No fixture dev/fixtures/",
+      selection.preview,
+      ".json"
+    ] });
+  }
+  if (fixture2.slot !== slot || fixture2.id !== contribution.id) {
+    return /* @__PURE__ */ jsxs("div", { role: "alert", className: "ayon-addon-error", children: [
+      "The fixture is for ",
+      fixture2.slot,
+      " ",
+      fixture2.id,
+      "."
+    ] });
+  }
+  const frame = (() => {
+    if (isPopup) {
+      return /* @__PURE__ */ jsxs("div", { className: "ayon-shell-bar", children: [
+        /* @__PURE__ */ jsx("span", { className: "spacer" }),
+        /* @__PURE__ */ jsx(ButtonItem, { contribution, context, autoOpen: true, onContext: onPopupContext })
+      ] });
+    }
+    if (isDialog) {
+      return /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", "data-shell-surface": "preview-frame", children: /* @__PURE__ */ jsx(
+        ContributionView,
+        {
+          contribution,
+          piece: "dialog",
+          context: { ...context, close: () => void 0 }
+        }
+      ) });
+    }
+    if (runs) {
+      const item = contribution;
+      return /* @__PURE__ */ jsx("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsx(Button, { icon: item.icon, label: item.label, "data-shell-action": "run", onClick: run }) });
+    }
+    if (slot === "tableColumn") {
+      const entities = context.entities || [];
+      return /* @__PURE__ */ jsx(
+        ShellTable,
+        {
+          page: context.page || "overview",
+          entities,
+          selected: [],
+          onSelect: () => void 0
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ayon-shell-body",
+        style: { width: FRAME_WIDTH[slot] ?? "100%", flex: FRAME_WIDTH[slot] ? "0 0 auto" : 1 },
+        "data-shell-surface": "preview-frame",
+        children: /* @__PURE__ */ jsx(ContributionView, { contribution, context })
+      }
+    );
+  })();
+  return frame;
+};
+const DETAILS_SCOPE = "addon-dev";
+const idOf = (contribution) => contribution.id;
+const useReport = (contribution, context, ready, run) => {
+  useEffect(() => {
+    setStage({
+      context,
+      ready,
+      run: typeof run === "function" ? run : run && context ? () => runContribution(contribution, context) : void 0
+    });
+  }, [contribution, context, ready, run]);
+};
+const Hint = ({ children }) => /* @__PURE__ */ jsx("div", { style: { padding: 16, color: "var(--md-sys-color-outline)" }, children });
+const ProjectPageBody = ({ contribution, selection }) => {
+  const projectName = selection.projectName;
+  const context = useProjectPageSlotContext(projectName);
+  useReport(contribution, context, !!context.project);
+  return /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", "data-shell-surface": "project-page", children: /* @__PURE__ */ jsx(ContributionView, { contribution, context }) });
+};
+const ProjectPageProviders = ({
+  page,
+  projectName,
+  viewType,
+  initialSelection,
+  children
+}) => {
+  const dispatch = useDispatch();
+  const [rowSelection, setRowSelection] = useState(
+    () => Object.fromEntries((initialSelection || []).map((id) => [id, true]))
+  );
+  const controlled = initialSelection?.length ? { rowSelection, setRowSelection } : {};
+  return /* @__PURE__ */ jsx(ViewsProvider, { viewType, projectName, dispatch, children: /* @__PURE__ */ jsx(EntityUpdatesProvider, { projectNames: [projectName], children: /* @__PURE__ */ jsx(
+    SlicerProvider,
+    {
+      ...controlled,
+      page,
+      projectName,
+      viewSettings: void 0,
+      isLoadingViews: false,
+      updateViewSettings: async () => {
+      },
+      children: /* @__PURE__ */ jsx(NewEntityProvider, { children })
+    }
+  ) }) });
+};
+const ProjectPageStage = (props) => /* @__PURE__ */ jsx(
+  ProjectPageProviders,
+  {
+    page: idOf(props.contribution),
+    projectName: props.selection.projectName,
+    viewType: props.contribution.viewType,
+    children: /* @__PURE__ */ jsx(ProjectPageBody, { ...props })
+  },
+  props.contribution.key
+);
+const useStudioSelection = (selection, onChange) => {
+  const { projectNames, projectName } = selection;
+  const names = useMemo(
+    () => projectNames ?? (projectName ? [projectName] : []),
+    [projectNames, projectName]
+  );
+  const onSelect = useCallback(
+    (next) => onChange({ ...selection, projectNames: next }),
+    [selection, onChange]
+  );
+  return useMemo(() => ({ selection: names, onSelect }), [names, onSelect]);
+};
+const StudioPageBody = ({
+  contribution,
+  selectedProjects
+}) => {
+  const context = useStudioPageSlotContext(selectedProjects);
+  useReport(contribution, context, true);
+  return /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", "data-shell-surface": "studio-page", children: /* @__PURE__ */ jsx(ContributionView, { contribution, context }) });
+};
+const StudioPageStage = ({ contribution, selection, onChange }) => {
+  const dispatch = useDispatch();
+  const studio = useStudioSelection(selection, onChange);
+  return /* @__PURE__ */ jsx(
+    ViewsProvider,
+    {
+      viewType: contribution.viewType,
+      dispatch,
+      children: /* @__PURE__ */ jsx(StudioSelectionProvider, { value: studio, children: /* @__PURE__ */ jsx(StudioPageBody, { contribution, selectedProjects: studio.selection }) })
+    },
+    contribution.key
+  );
+};
+const HeaderStage = ({ contribution, selection }) => {
+  const { contributions } = useContributions("header.item");
+  const [context, setContext] = useState();
+  useReport(contribution, context, !!context);
+  const base = useMemo(() => ({ projectName: selection.projectName ?? null }), [selection.projectName]);
+  const sorted = (placement) => contributions.filter((item2) => item2.placement === placement).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const item = (header) => /* @__PURE__ */ jsx(
+    ButtonItem,
+    {
+      contribution: header,
+      context: base,
+      autoOpen: header === contribution,
+      onContext: header === contribution ? setContext : void 0
+    },
+    header.key
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "ayon-shell-bar", "data-shell-surface": "header", children: [
+    /* @__PURE__ */ jsx(Button, { icon: "home", variant: "text", disabled: true }),
+    sorted("left").map(item),
+    /* @__PURE__ */ jsx("span", { className: "spacer" }),
+    sorted("right").map(item),
+    /* @__PURE__ */ jsx(Button, { icon: "forum", variant: "text", disabled: true }),
+    /* @__PURE__ */ jsx(Button, { icon: "inbox", variant: "text", disabled: true })
+  ] });
+};
+const DetailsPanelStage = ({ contribution, selection }) => {
+  const projectName = selection.projectName;
+  const { entities, entityType = "task" } = selection;
+  const { data: project } = useGetProjectQuery({ projectName });
+  const { data: users = [] } = useGetUsersAssigneeQuery({ names: void 0, projectName });
+  const { setTab } = useScopedDetailsPanel(DETAILS_SCOPE);
+  const isTab = contribution.slot === "detailsPanel.tab";
+  useEffect(() => {
+    if (isTab) setTab(contribution.key);
+  }, [contribution.key, isTab]);
+  const context = useMemo(
+    () => isTab ? { projectName, entityType, entities, scope: DETAILS_SCOPE } : { projectName, entityType, selectedEntities: entities },
+    [isTab, projectName, entityType, entities]
+  );
+  useReport(contribution, context, !!project && entities.length > 0, !isTab);
+  if (!entities.length) return /* @__PURE__ */ jsx(Hint, { children: "Pick entities in the context panel." });
+  if (!project) return /* @__PURE__ */ jsxs(Hint, { children: [
+    "Loading ",
+    projectName,
+    "…"
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", style: { justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx("div", { style: { width: "min(620px, 100%)", height: "100%" }, "data-shell-surface": "details-panel", children: /* @__PURE__ */ jsx(
+    DetailsPanel,
+    {
+      isOpen: true,
+      scope: DETAILS_SCOPE,
+      entityType,
+      entities: entities.map((e) => ({ id: e.id, projectName: e.projectName })),
+      projectsInfo: { [projectName]: project },
+      projectNames: [projectName],
+      tagsOptions: project.tags || [],
+      projectUsers: users,
+      activeProjectUsers: users,
+      style: { boxShadow: "none" }
+    }
+  ) }) });
+};
+const SlicerBody = ({ contribution, selection }) => {
+  const { rowSelection, sliceType } = useSlicerContext();
+  const context = useMemo(
+    () => ({
+      projectName: selection.projectName,
+      sliceType,
+      selected: Object.keys(rowSelection).filter((id) => rowSelection[id]).map((id) => ({ id })),
+      menu: "context"
+    }),
+    [selection.projectName, sliceType, rowSelection]
+  );
+  useReport(contribution, context, true, true);
+  return (
+    // positioned: the slicer's Section fills its container (a splitter panel in AYON)
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", width: 360, height: "100%" }, "data-shell-surface": "slicer", children: /* @__PURE__ */ jsx(SlicerHost, { fields: ["hierarchy", "assignees", "status", "taskType"] }) })
+  );
+};
+const SlicerStage = (props) => /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", children: /* @__PURE__ */ jsx(
+  ProjectPageProviders,
+  {
+    page: `addon-dev-${idOf(props.contribution)}`,
+    projectName: props.selection.projectName,
+    initialSelection: props.selection.entities.map((entity) => entity.id),
+    children: /* @__PURE__ */ jsx(SlicerBody, { ...props })
+  }
+) });
+const ProjectListStage = ({ contribution, selection, onChange }) => {
+  const studio = useStudioSelection(selection, onChange);
+  const context = useMemo(() => ({ projectNames: studio.selection, menu: "context" }), [studio.selection]);
+  useReport(contribution, context, true, true);
+  const { ProjectList: ProjectList2 } = getHostComponents();
+  return /* @__PURE__ */ jsx(StudioSelectionProvider, { value: studio, children: /* @__PURE__ */ jsx("div", { style: { width: 280, height: "100%" }, children: /* @__PURE__ */ jsx(ProjectList2, { multiSelect: true }) }) });
+};
+const TableStage = ({ contribution, selection }) => {
+  const projectName = selection.projectName;
+  const page = selection.page || "overview";
+  const { entities } = selection;
+  const [selected, setSelected] = useState([]);
+  const [popupContext, setPopupContext] = useState();
+  const { contributions: toolbarItems } = useContributions("projectTable.toolbarItem");
+  const sections = useAddonCustomizeSections(page);
+  const { isPanelOpen, openPanel, selectSetting, closePanel } = useSettingsPanel();
+  const slot = contribution.slot;
+  useEffect(() => {
+    if (slot !== "projectTable.customizeSection") return;
+    openPanel();
+    selectSetting(`addon:${contribution.key}`);
+  }, [contribution.key, slot]);
+  const shortcuts = useAddonTableShortcuts(slot === "table.shortcut" ? page : void 0);
+  const shortcutContext = useMemo(() => {
+    const targets = selected.length ? selected : entities;
+    if (slot !== "table.shortcut" || !targets.length) return void 0;
+    const rows = targets.map(({ id, entityType, name, label }) => ({
+      id,
+      entityType,
+      name,
+      label,
+      data: { id, entityType, name, label }
+    }));
+    return {
+      table: page,
+      projectName,
+      rows,
+      focused: { rowId: rows[0].id, columnId: "name" },
+      cells: rows.map((row) => ({ rowId: row.id, columnId: "name" }))
+    };
+  }, [slot, page, projectName, entities, selected]);
+  const { runShortcut } = shortcuts;
+  const pressShortcut = useMemo(
+    () => shortcutContext && (async () => runShortcut(contribution, shortcutContext)),
+    [runShortcut, contribution, shortcutContext]
+  );
+  const context = useMemo(() => {
+    if (slot === "tableColumn") return { projectName, page, entities };
+    if (slot === "entityMenuItem")
+      return { projectName, page, entities: selected.length ? selected : entities };
+    if (slot === "table.shortcut") return shortcutContext;
+    if (slot === "projectTable.customizeSection") return { projectName, page };
+    return popupContext;
+  }, [slot, projectName, page, entities, selected, shortcutContext, popupContext]);
+  useReport(contribution, context, !!context, slot === "entityMenuItem" || pressShortcut);
+  const base = useMemo(() => ({ projectName, page }), [projectName, page]);
+  const pageToolbarItems = toolbarItems.filter((item) => !item.pages?.length || item.pages.includes(page));
+  return /* @__PURE__ */ jsxs("div", { className: "ayon-shell-stage", style: { flex: 1 }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ayon-shell-bar", "data-shell-surface": "table-toolbar", children: [
+      /* @__PURE__ */ jsx("span", { children: page }),
+      /* @__PURE__ */ jsx("span", { className: "spacer" }),
+      pageToolbarItems.map((item) => /* @__PURE__ */ jsx(
+        ButtonItem,
+        {
+          contribution: item,
+          context: base,
+          autoOpen: item === contribution,
+          onContext: item === contribution ? setPopupContext : void 0
+        },
+        item.key
+      )),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: "settings",
+          label: "Customize",
+          variant: "text",
+          selected: isPanelOpen,
+          onClick: () => isPanelOpen ? closePanel() : openPanel()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ayon-shell-body", children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: entities.length ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          tabIndex: 0,
+          onKeyDown: (e) => shortcuts.handleShortcut(e, () => shortcutContext),
+          children: /* @__PURE__ */ jsx(
+            ShellTable,
+            {
+              page,
+              entities,
+              selected,
+              onSelect: setSelected
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(Hint, { children: "Pick entities in the context panel: they are the table's rows." }) }),
+      isPanelOpen && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { width: 320, borderLeft: "1px solid var(--md-sys-color-outline-variant)" },
+          "data-shell-surface": "customize",
+          children: /* @__PURE__ */ jsx(SettingsPanel, { settings: sections })
+        }
+      )
+    ] }),
+    shortcuts.dialog && /* @__PURE__ */ jsx(AddonDialog, { contribution: shortcuts.dialog.contribution, context: shortcuts.dialog.context })
+  ] });
+};
+const getHostComponents = () => getHost().components;
+const Stage = ({
+  mode,
+  selection,
+  onChange
+}) => {
+  const contribution = getRegistry().contributions.find(
+    (c) => c.slot === selection.slot && idOf(c) === selection.id
+  );
+  useEffect(() => {
+    if (!contribution) setStage({ ready: false });
+  }, [contribution]);
+  if (!contribution) {
+    return /* @__PURE__ */ jsx("main", { className: "ayon-shell-stage", children: /* @__PURE__ */ jsx(Hint, { children: selection.slot ? `No contribution "${selection.id}" in ${selection.slot}.` : "Pick a contribution." }) });
+  }
+  if (mode === "preview") {
+    return /* @__PURE__ */ jsx("main", { className: "ayon-shell-stage", children: /* @__PURE__ */ jsx(PreviewStage, { contribution, selection }) });
+  }
+  if (!selection.projectName && needsProject(contribution.slot)) {
+    return /* @__PURE__ */ jsx("main", { className: "ayon-shell-stage", children: /* @__PURE__ */ jsx(Hint, { children: "Pick a project in the context panel." }) });
+  }
+  const props = { contribution, selection };
+  const body = (() => {
+    switch (contribution.slot) {
+      case "project.page":
+        return /* @__PURE__ */ jsx(ProjectPageStage, { ...props });
+      case "studio.page":
+        return /* @__PURE__ */ jsx(StudioPageStage, { ...props, onChange });
+      case "header.item":
+        return /* @__PURE__ */ jsx(HeaderStage, { ...props });
+      case "detailsPanel.tab":
+      case "detailsPanel.menuItem":
+        return /* @__PURE__ */ jsx(DetailsPanelStage, { ...props });
+      case "slicer.menuItem":
+        return /* @__PURE__ */ jsx(SlicerStage, { ...props });
+      case "projectList.menuItem":
+        return /* @__PURE__ */ jsx(ProjectListStage, { ...props, onChange });
+      case "tableColumn":
+      case "entityMenuItem":
+      case "table.shortcut":
+      case "projectTable.toolbarItem":
+      case "projectTable.customizeSection":
+        return /* @__PURE__ */ jsx(TableStage, { ...props });
+      default:
+        return /* @__PURE__ */ jsxs(Hint, { children: [
+          "The shell has no stage for ",
+          contribution.slot,
+          " yet."
+        ] });
+    }
+  })();
+  return /* @__PURE__ */ jsx("main", { className: "ayon-shell-stage", "data-shell-slot": contribution.slot, children: body });
+};
+const StageCaption = ({
+  mode,
+  selection
+}) => {
+  const contribution = getRegistry().contributions.find(
+    (c) => c.slot === selection.slot && c.id === selection.id
+  );
+  if (!contribution) return null;
+  const slot = contribution.slot;
+  return /* @__PURE__ */ jsxs("header", { className: "ayon-shell-caption", "data-shell-surface": "caption", children: [
+    /* @__PURE__ */ jsx(Icon, { icon: slotIcon(slot) }),
+    /* @__PURE__ */ jsxs("div", { className: "ayon-shell-caption-text", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: contributionTitle(contribution) }),
+        /* @__PURE__ */ jsx("span", { className: "ayon-shell-caption-path", children: slotPath(slot).map((part) => /* @__PURE__ */ jsx("span", { children: part }, part)) })
+      ] }),
+      /* @__PURE__ */ jsxs("small", { children: [
+        SLOT_DOCS[slot]?.where,
+        " · ",
+        /* @__PURE__ */ jsx("code", { children: slot })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: `ayon-shell-chip ${mode}`, children: mode === "live" ? "Live" : `Preview: ${selection.preview}` })
+  ] });
+};
+class StageBoundary extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    const what = this.props.what || "stage";
+    console.error(`[ayon-addon shell] the ${what} crashed`, error, info.componentStack);
+    if (what === "stage") setStage({ ready: false });
+  }
+  render() {
+    if (!this.state.error) return this.props.children;
+    const what = this.props.what || "stage";
+    const message = /* @__PURE__ */ jsxs("div", { role: "alert", className: "ayon-addon-error ayon-shell-crash", style: { margin: 16 }, children: [
+      "The dev shell's ",
+      what,
+      " crashed: ",
+      this.state.error.message
+    ] });
+    return what === "stage" ? /* @__PURE__ */ jsx("main", { className: "ayon-shell-stage", children: message }) : /* @__PURE__ */ jsx("aside", { children: message });
+  }
+}
+const Centered = ({ children }) => /* @__PURE__ */ jsx("div", { style: { display: "grid", placeItems: "center", height: "100%" }, children });
+const SignedIn = ({ options, children }) => {
+  const { data: user2, error, isLoading, refetch } = useGetCurrentUserQuery();
+  if (isLoading) return /* @__PURE__ */ jsxs(Centered, { children: [
+    "Connecting to ",
+    options.serverUrl,
+    "…"
+  ] });
+  if (!user2) {
+    const status = error?.status;
+    if (status === 401 || status === 403) {
+      return /* @__PURE__ */ jsx(
+        LoginPage,
+        {
+          onLogin: (result) => {
+            if (result.accessToken) storeAccessToken(result.accessToken);
+            refetch();
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Centered, { children: /* @__PURE__ */ jsxs("div", { role: "alert", className: "ayon-addon-error", children: [
+      "Can't reach AYON at ",
+      options.serverUrl,
+      " (",
+      status ?? "no answer",
+      "). Set AYON_SERVER_URL."
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const AppProviders = ({ children }) => {
+  const dispatch = useDispatch();
+  const { data: user2 } = useGetCurrentUserQuery();
+  return /* @__PURE__ */ jsx(GlobalProvider, { children: /* @__PURE__ */ jsx(PowerpackProvider, { children: /* @__PURE__ */ jsxs(ContextMenuProvider, { children: [
+    /* @__PURE__ */ jsx(GlobalContextMenu, {}),
+    /* @__PURE__ */ jsx(MenuProvider, { useNavigate, children: /* @__PURE__ */ jsx(URIProvider, { children: /* @__PURE__ */ jsx(
+      DetailsPanelProvider,
+      {
+        user: user2,
+        dispatch,
+        useLocation,
+        useNavigate,
+        useParams,
+        useSearchParams,
+        children: /* @__PURE__ */ jsx(PiPProvider, { children: /* @__PURE__ */ jsx(DeleteEntitiesProvider, { children: /* @__PURE__ */ jsx(SettingsPanelProvider, { children }) }) })
+      }
+    ) }) })
+  ] }) }) });
+};
+const ProjectProviders = ({
+  projectName,
+  light,
+  children
+}) => projectName && light ? /* @__PURE__ */ jsx(ProjectContextProvider, { projectName, children }) : projectName ? /* @__PURE__ */ jsx(ProjectContextProvider, { projectName, children: /* @__PURE__ */ jsx(ProjectFoldersContextProvider, { projectName, children: /* @__PURE__ */ jsx(ProjectDataProvider, { projectName, children }) }) }) : /* @__PURE__ */ jsx(Fragment, { children });
+const Workbench = ({ options, mode }) => {
+  const [selection, setSelection] = useState(readSelection);
+  useEffect(() => writeSelection(selection), [selection]);
+  useEffect(() => setStatus({ selection, mode }), [selection, mode]);
+  return /* @__PURE__ */ jsxs(Splitter, { className: "ayon-shell", stateKey: "ayon-addon-shell", stateStorage: "local", children: [
+    /* @__PURE__ */ jsx(SplitterPanel, { size: 22, minSize: 12, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(StageBoundary, { what: "developer panel", children: /* @__PURE__ */ jsx(DevPanel, { options, mode, selection, onChange: setSelection }) }) }),
+    /* @__PURE__ */ jsxs(SplitterPanel, { size: 78, style: { overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx(StageCaption, { mode, selection }),
+      /* @__PURE__ */ jsx(
+        ProjectProviders,
+        {
+          projectName: mode === "live" || selection.slot === "tableColumn" ? selection.projectName : void 0,
+          light: mode === "preview",
+          children: /* @__PURE__ */ jsx(StageBoundary, { children: /* @__PURE__ */ jsx(
+            Stage,
+            {
+              mode,
+              selection,
+              onChange: setSelection
+            },
+            selection.projectName || ""
+          ) }, `${selection.projectName}:${selection.slot}:${selection.id}`)
+        }
+      )
+    ] })
+  ] });
+};
+const Shell = ({ options, mode }) => {
+  const store = useMemo(() => {
+    const standaloneStore = createStandaloneStore();
+    provideHost({ dispatch: standaloneStore.dispatch });
+    return standaloneStore;
+  }, []);
+  return /* @__PURE__ */ jsxs(Provider, { store, children: [
+    /* @__PURE__ */ jsx(SplitterStyles, {}),
+    /* @__PURE__ */ jsxs(BrowserRouter, { children: [
+      mode === "live" ? /* @__PURE__ */ jsx(SignedIn, { options, children: /* @__PURE__ */ jsx(AppProviders, { children: /* @__PURE__ */ jsx(Workbench, { options, mode }) }) }) : /* @__PURE__ */ jsx(AppProviders, { children: /* @__PURE__ */ jsx(Workbench, { options, mode }) }),
+      /* @__PURE__ */ jsx(ToastContainer, { position: "bottom-right", theme: "dark" })
+    ] })
+  ] });
+};
+const FIXTURES_PATH = "/__ayon-addon/fixtures";
+const loadFixture = async (name) => {
+  const response = await fetch(`${FIXTURES_PATH}/${encodeURIComponent(name)}`);
+  if (!response.ok) return void 0;
+  const fixture2 = await response.json();
+  fixture2.responses ??= {};
+  if (fixture2.user) fixture2.responses["GET /api/users/me"] ??= { status: 200, body: fixture2.user };
+  return fixture2;
+};
+const startShell = async (options) => {
+  const preview = readSelection().preview;
+  const mode = preview ? "preview" : "live";
+  installNetwork(mode);
+  provideShellHost();
+  registerManifest(options.addon, options.manifest);
+  setManifestsLoading(false);
+  if (preview) {
+    const fixture2 = await loadFixture(preview);
+    setFixture(fixture2);
+    if (fixture2) {
+      const context = fixture2.context;
+      writeSelection({
+        preview,
+        slot: fixture2.slot,
+        id: fixture2.id,
+        projectName: context.projectName,
+        entities: context.entities || [],
+        page: context.page
+      });
+    }
+  }
+  createRoot(document.getElementById("root")).render(
+    /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(Shell, { options, mode }) })
+  );
+};
+export {
+  FIXTURES_PATH,
+  startShell
+};