@ynput/ayon-frontend-shared 0.2.18 → 0.2.20

package/dist/shared/src/components/Views/ViewForm/ViewFormContainer.cjs.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+require("../../../api/base/client.cjs.js");
+require("../../../api/generated/graphql.cjs.js");
+require("../../../api/generated/access.cjs.js");
+require("../../../api/generated/actions.cjs.js");
+require("../../../api/generated/activityFeed.cjs.js");
+require("../../../api/generated/addons.cjs.js");
+require("../../../api/generated/anatomy.cjs.js");
+require("../../../api/generated/attributes.cjs.js");
+require("../../../api/generated/authentication.cjs.js");
+require("../../../api/generated/bundles.cjs.js");
+require("../../../api/generated/configuration.cjs.js");
+require("../../../api/generated/desktop.cjs.js");
+require("../../../api/generated/entityLists.cjs.js");
+require("../../../api/generated/events.cjs.js");
+require("../../../api/generated/files.cjs.js");
+require("../../../api/generated/folders.cjs.js");
+require("../../../api/generated/inbox.cjs.js");
+require("../../../api/generated/links.cjs.js");
+require("../../../api/generated/market.cjs.js");
+require("../../../api/generated/onboarding.cjs.js");
+require("../../../api/generated/operations.cjs.js");
+require("../../../api/generated/products.cjs.js");
+require("../../../api/generated/projectDashboard.cjs.js");
+require("../../../api/generated/projects.cjs.js");
+require("../../../api/generated/reviewables.cjs.js");
+require("../../../api/generated/services.cjs.js");
+require("../../../api/generated/system.cjs.js");
+require("../../../api/generated/tasks.cjs.js");
+require("../../../api/generated/teams.cjs.js");
+require("../../../api/generated/thumbnails.cjs.js");
+require("../../../api/generated/uRIs.cjs.js");
+require("../../../api/generated/users.cjs.js");
+require("../../../api/generated/versions.cjs.js");
+require("../../../api/generated/workfiles.cjs.js");
+require("../../../api/generated/ynputCloud.cjs.js");
+require("../../../api/generated/grouping.cjs.js");
+require("../../../api/generated/views.cjs.js");
+require("../../../api/queries/actions/getActions.cjs.js");
+require("../../../api/queries/activities/getActivities.cjs.js");
+require("../../../api/queries/activities/updateActivities.cjs.js");
+require("../../../api/queries/activities/updateReaction.cjs.js");
+require("../../../api/queries/activities/getMentions.cjs.js");
+require("../../../api/queries/addons/getAddons.cjs.js");
+require("../../../api/queries/addons/updateAddons.cjs.js");
+require("../../../api/queries/attributes/getAttributes.cjs.js");
+require("../../../api/queries/attributes/updateAttributes.cjs.js");
+require("../../../api/queries/authentication/getAuthentication.cjs.js");
+require("../../../api/queries/entities/getEntity.cjs.js");
+require("../../../api/queries/entities/getEntityPanel.cjs.js");
+require("../../../api/queries/entities/updateEntity.cjs.js");
+require("../../../api/queries/entityLists/getLists.cjs.js");
+require("../../../api/queries/entityLists/updateLists.cjs.js");
+require("../../../api/queries/entityLists/getListsAttributes.cjs.js");
+require("../../../api/queries/entityLists/updateListsAttributes.cjs.js");
+require("../../../api/queries/folders/getFolders.cjs.js");
+require("../../../api/queries/overview/getOverview.cjs.js");
+require("../../../api/queries/overview/updateOverview.cjs.js");
+require("../../../api/queries/project/getProject.cjs.js");
+require("../../../api/queries/project/updateProject.cjs.js");
+require("../../../api/queries/review/getReview.cjs.js");
+require("../../../api/queries/review/updateReview.cjs.js");
+require("../../../api/queries/system/getSystem.cjs.js");
+require("../../../api/queries/userDashboard/getUserDashboard.cjs.js");
+require("../../../api/queries/users/getUsers.cjs.js");
+require("../../../api/queries/users/updateUsers.cjs.js");
+require("../../../api/queries/watchers/getWatchers.cjs.js");
+require("../../../api/queries/permissions/getPermissions.cjs.js");
+require("../../../api/queries/grouping/getGrouping.cjs.js");
+require("../../../api/queries/versions/updateVersions.cjs.js");
+require("../../../api/queries/products/createProduct.cjs.js");
+require("../../../api/queries/cloud/cloud.cjs.js");
+const getViews = require("../../../api/queries/views/getViews.cjs.js");
+const updateViews = require("../../../api/queries/views/updateViews.cjs.js");
+const ViewForm = require("./ViewForm.cjs.js");
+const ViewFormContainer = React.forwardRef(
+  ({
+    initialData = { label: "", scope: "project", visibility: "private" },
+    viewId,
+    viewType,
+    project,
+    onSuccess,
+    onCancel
+  }, ref) => {
+    const isEditing = !!viewId;
+    const [error, setError] = React.useState();
+    const [createView, { isLoading: createLoading }] = updateViews.useCreateViewMutation();
+    const { data: viewData, isLoading: viewLoading } = getViews.useGetViewQuery(
+      { viewId, viewType, project },
+      { skip: !viewId }
+    );
+    const handleSubmit = React.useCallback(
+      async (formData) => {
+        try {
+          setError(void 0);
+          if (isEditing && viewId) {
+            console.log("Update view - would update with data:", formData);
+            const viewData2 = {
+              id: viewId,
+              label: formData.label,
+              scope: formData.scope,
+              visibility: formData.visibility
+            };
+            onSuccess == null ? void 0 : onSuccess("update", viewData2);
+          } else {
+            let payload;
+            if (viewType === "overview") {
+              payload = {
+                label: formData.label,
+                scope: formData.scope,
+                visibility: formData.visibility,
+                settings: {},
+                viewType: "overview"
+              };
+            } else {
+              payload = {
+                label: formData.label,
+                scope: formData.scope,
+                visibility: formData.visibility,
+                settings: { expanded: false },
+                viewType: "taskProgress"
+              };
+            }
+            const result = await createView({
+              viewType,
+              project,
+              payload
+            }).unwrap();
+            const viewData2 = {
+              id: result.id,
+              label: formData.label,
+              scope: formData.scope,
+              visibility: formData.visibility
+            };
+            onSuccess == null ? void 0 : onSuccess("create", viewData2);
+          }
+        } catch (err) {
+          setError((err == null ? void 0 : err.message) || "Failed to save view");
+          console.error("Error saving view:", err);
+        }
+      },
+      [isEditing, viewId, viewType, project, createView, onSuccess]
+    );
+    const handleDelete = React.useCallback(async () => {
+      if (!viewId) return;
+      try {
+        setError(void 0);
+        console.log("Delete view - not implemented yet");
+        onSuccess == null ? void 0 : onSuccess("delete");
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to delete view");
+        console.error("Error deleting view:", err);
+      }
+    }, [viewId, onSuccess]);
+    const handleDuplicate = React.useCallback(async () => {
+      if (!viewId) return;
+      try {
+        setError(void 0);
+        console.log("Duplicate view - not implemented yet");
+        onSuccess == null ? void 0 : onSuccess("duplicate");
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to duplicate view");
+        console.error("Error duplicating view:", err);
+      }
+    }, [viewId, onSuccess]);
+    const isLoading = createLoading || viewLoading;
+    console.log("render ViewFormContainer with data:");
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      ViewForm.ViewForm,
+      {
+        ref,
+        initialData: isEditing ? viewData : initialData,
+        error,
+        isEditing,
+        isLoading,
+        viewLoading,
+        onSubmit: handleSubmit,
+        onDelete: handleDelete,
+        onDuplicate: handleDuplicate,
+        onCancel
+      }
+    );
+  }
+);
+exports.ViewFormContainer = ViewFormContainer;
+//# sourceMappingURL=ViewFormContainer.cjs.js.map

package/dist/shared/src/components/Views/ViewForm/ViewFormContainer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewFormContainer.cjs.js","sources":["../../../../../../src/components/Views/ViewForm/ViewFormContainer.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState, useCallback, useMemo } from 'react'\nimport { useCreateViewMutation, useGetViewQuery } from '@shared/api'\nimport {\n  ViewListItemModel,\n  OverviewViewModel,\n  TaskProgressViewModel,\n} from '@shared/api/generated/views'\nimport { ViewForm } from './ViewForm'\nimport type { ViewFormData, ViewType } from '..'\n\ninterface ViewData extends ViewListItemModel {\n  id: string\n}\n\ninterface ViewFormContainerProps {\n  initialData?: ViewFormData\n  viewId?: string // If provided, form is in edit mode\n  viewType: ViewType\n  project?: string\n  onSuccess?: (action: 'create' | 'update' | 'delete' | 'duplicate', data?: ViewData) => void\n  onCancel?: () => void\n}\n\nexport const ViewFormContainer = forwardRef<HTMLFormElement, ViewFormContainerProps>(\n  (\n    {\n      initialData = { label: '', scope: 'project', visibility: 'private' },\n      viewId,\n      viewType,\n      project,\n      onSuccess,\n      onCancel,\n    },\n    ref,\n  ) => {\n    const isEditing = !!viewId\n    const [error, setError] = useState<string | undefined>()\n\n    const [createView, { isLoading: createLoading }] = useCreateViewMutation()\n\n    const { data: viewData, isLoading: viewLoading } = useGetViewQuery(\n      { viewId: viewId as string, viewType, project },\n      { skip: !viewId },\n    )\n\n    const handleSubmit = useCallback(\n      async (formData: ViewFormData) => {\n        try {\n          setError(undefined)\n\n          if (isEditing && viewId) {\n            // TODO: Implement update mutation when available\n            console.log('Update view - would update with data:', formData)\n            // For now, just call onSuccess without making API call\n            const viewData: ViewData = {\n              id: viewId,\n              label: formData.label,\n              scope: formData.scope,\n              visibility: formData.visibility,\n            }\n            onSuccess?.('update', viewData)\n          } else {\n            // Create new view with basic settings structure\n            let payload: OverviewViewModel | TaskProgressViewModel\n\n            if (viewType === 'overview') {\n              payload = {\n                label: formData.label,\n                scope: formData.scope,\n                visibility: formData.visibility,\n                settings: {},\n                viewType: 'overview',\n              } as OverviewViewModel\n            } else {\n              payload = {\n                label: formData.label,\n                scope: formData.scope,\n                visibility: formData.visibility,\n                settings: { expanded: false },\n                viewType: 'taskProgress',\n              } as TaskProgressViewModel\n            }\n\n            const result = await createView({\n              viewType: viewType,\n              project,\n              payload,\n            }).unwrap()\n\n            const viewData: ViewData = {\n              id: result.id,\n              label: formData.label,\n              scope: formData.scope,\n              visibility: formData.visibility,\n            }\n\n            onSuccess?.('create', viewData)\n          }\n        } catch (err: any) {\n          setError(err?.message || 'Failed to save view')\n          console.error('Error saving view:', err)\n        }\n      },\n      [isEditing, viewId, viewType, project, createView, onSuccess],\n    )\n\n    const handleDelete = useCallback(async () => {\n      if (!viewId) return\n\n      try {\n        setError(undefined)\n        // TODO: Implement delete mutation when available\n        console.log('Delete view - not implemented yet')\n        onSuccess?.('delete')\n      } catch (err: any) {\n        setError(err?.message || 'Failed to delete view')\n        console.error('Error deleting view:', err)\n      }\n    }, [viewId, onSuccess])\n\n    const handleDuplicate = useCallback(async () => {\n      if (!viewId) return\n\n      try {\n        setError(undefined)\n        // TODO: Implement duplicate functionality when available\n        console.log('Duplicate view - not implemented yet')\n        onSuccess?.('duplicate')\n      } catch (err: any) {\n        setError(err?.message || 'Failed to duplicate view')\n        console.error('Error duplicating view:', err)\n      }\n    }, [viewId, onSuccess])\n\n    const isLoading = createLoading || viewLoading\n\n    console.log('render ViewFormContainer with data:')\n\n    return (\n      <ViewForm\n        ref={ref}\n        initialData={isEditing ? viewData : initialData}\n        error={error}\n        isEditing={isEditing}\n        isLoading={isLoading}\n        viewLoading={viewLoading}\n        onSubmit={handleSubmit}\n        onDelete={handleDelete}\n        onDuplicate={handleDuplicate}\n        onCancel={onCancel}\n      />\n    )\n  },\n)\n"],"names":["forwardRef","useState","useCreateViewMutation","useGetViewQuery","useCallback","viewData","jsx","ViewForm"],"mappings":"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"}

package/dist/shared/src/components/Views/ViewForm/ViewFormContainer.es.js

@@ -0,0 +1,189 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef, useState, useCallback } from "react";
+import "../../../api/base/client.es.js";
+import "../../../api/generated/graphql.es.js";
+import "../../../api/generated/access.es.js";
+import "../../../api/generated/actions.es.js";
+import "../../../api/generated/activityFeed.es.js";
+import "../../../api/generated/addons.es.js";
+import "../../../api/generated/anatomy.es.js";
+import "../../../api/generated/attributes.es.js";
+import "../../../api/generated/authentication.es.js";
+import "../../../api/generated/bundles.es.js";
+import "../../../api/generated/configuration.es.js";
+import "../../../api/generated/desktop.es.js";
+import "../../../api/generated/entityLists.es.js";
+import "../../../api/generated/events.es.js";
+import "../../../api/generated/files.es.js";
+import "../../../api/generated/folders.es.js";
+import "../../../api/generated/inbox.es.js";
+import "../../../api/generated/links.es.js";
+import "../../../api/generated/market.es.js";
+import "../../../api/generated/onboarding.es.js";
+import "../../../api/generated/operations.es.js";
+import "../../../api/generated/products.es.js";
+import "../../../api/generated/projectDashboard.es.js";
+import "../../../api/generated/projects.es.js";
+import "../../../api/generated/reviewables.es.js";
+import "../../../api/generated/services.es.js";
+import "../../../api/generated/system.es.js";
+import "../../../api/generated/tasks.es.js";
+import "../../../api/generated/teams.es.js";
+import "../../../api/generated/thumbnails.es.js";
+import "../../../api/generated/uRIs.es.js";
+import "../../../api/generated/users.es.js";
+import "../../../api/generated/versions.es.js";
+import "../../../api/generated/workfiles.es.js";
+import "../../../api/generated/ynputCloud.es.js";
+import "../../../api/generated/grouping.es.js";
+import "../../../api/generated/views.es.js";
+import "../../../api/queries/actions/getActions.es.js";
+import "../../../api/queries/activities/getActivities.es.js";
+import "../../../api/queries/activities/updateActivities.es.js";
+import "../../../api/queries/activities/updateReaction.es.js";
+import "../../../api/queries/activities/getMentions.es.js";
+import "../../../api/queries/addons/getAddons.es.js";
+import "../../../api/queries/addons/updateAddons.es.js";
+import "../../../api/queries/attributes/getAttributes.es.js";
+import "../../../api/queries/attributes/updateAttributes.es.js";
+import "../../../api/queries/authentication/getAuthentication.es.js";
+import "../../../api/queries/entities/getEntity.es.js";
+import "../../../api/queries/entities/getEntityPanel.es.js";
+import "../../../api/queries/entities/updateEntity.es.js";
+import "../../../api/queries/entityLists/getLists.es.js";
+import "../../../api/queries/entityLists/updateLists.es.js";
+import "../../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../../api/queries/folders/getFolders.es.js";
+import "../../../api/queries/overview/getOverview.es.js";
+import "../../../api/queries/overview/updateOverview.es.js";
+import "../../../api/queries/project/getProject.es.js";
+import "../../../api/queries/project/updateProject.es.js";
+import "../../../api/queries/review/getReview.es.js";
+import "../../../api/queries/review/updateReview.es.js";
+import "../../../api/queries/system/getSystem.es.js";
+import "../../../api/queries/userDashboard/getUserDashboard.es.js";
+import "../../../api/queries/users/getUsers.es.js";
+import "../../../api/queries/users/updateUsers.es.js";
+import "../../../api/queries/watchers/getWatchers.es.js";
+import "../../../api/queries/permissions/getPermissions.es.js";
+import "../../../api/queries/grouping/getGrouping.es.js";
+import "../../../api/queries/versions/updateVersions.es.js";
+import "../../../api/queries/products/createProduct.es.js";
+import "../../../api/queries/cloud/cloud.es.js";
+import { useGetViewQuery } from "../../../api/queries/views/getViews.es.js";
+import { useCreateViewMutation } from "../../../api/queries/views/updateViews.es.js";
+import { ViewForm } from "./ViewForm.es.js";
+const ViewFormContainer = forwardRef(
+  ({
+    initialData = { label: "", scope: "project", visibility: "private" },
+    viewId,
+    viewType,
+    project,
+    onSuccess,
+    onCancel
+  }, ref) => {
+    const isEditing = !!viewId;
+    const [error, setError] = useState();
+    const [createView, { isLoading: createLoading }] = useCreateViewMutation();
+    const { data: viewData, isLoading: viewLoading } = useGetViewQuery(
+      { viewId, viewType, project },
+      { skip: !viewId }
+    );
+    const handleSubmit = useCallback(
+      async (formData) => {
+        try {
+          setError(void 0);
+          if (isEditing && viewId) {
+            console.log("Update view - would update with data:", formData);
+            const viewData2 = {
+              id: viewId,
+              label: formData.label,
+              scope: formData.scope,
+              visibility: formData.visibility
+            };
+            onSuccess == null ? void 0 : onSuccess("update", viewData2);
+          } else {
+            let payload;
+            if (viewType === "overview") {
+              payload = {
+                label: formData.label,
+                scope: formData.scope,
+                visibility: formData.visibility,
+                settings: {},
+                viewType: "overview"
+              };
+            } else {
+              payload = {
+                label: formData.label,
+                scope: formData.scope,
+                visibility: formData.visibility,
+                settings: { expanded: false },
+                viewType: "taskProgress"
+              };
+            }
+            const result = await createView({
+              viewType,
+              project,
+              payload
+            }).unwrap();
+            const viewData2 = {
+              id: result.id,
+              label: formData.label,
+              scope: formData.scope,
+              visibility: formData.visibility
+            };
+            onSuccess == null ? void 0 : onSuccess("create", viewData2);
+          }
+        } catch (err) {
+          setError((err == null ? void 0 : err.message) || "Failed to save view");
+          console.error("Error saving view:", err);
+        }
+      },
+      [isEditing, viewId, viewType, project, createView, onSuccess]
+    );
+    const handleDelete = useCallback(async () => {
+      if (!viewId) return;
+      try {
+        setError(void 0);
+        console.log("Delete view - not implemented yet");
+        onSuccess == null ? void 0 : onSuccess("delete");
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to delete view");
+        console.error("Error deleting view:", err);
+      }
+    }, [viewId, onSuccess]);
+    const handleDuplicate = useCallback(async () => {
+      if (!viewId) return;
+      try {
+        setError(void 0);
+        console.log("Duplicate view - not implemented yet");
+        onSuccess == null ? void 0 : onSuccess("duplicate");
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to duplicate view");
+        console.error("Error duplicating view:", err);
+      }
+    }, [viewId, onSuccess]);
+    const isLoading = createLoading || viewLoading;
+    console.log("render ViewFormContainer with data:");
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ViewForm,
+      {
+        ref,
+        initialData: isEditing ? viewData : initialData,
+        error,
+        isEditing,
+        isLoading,
+        viewLoading,
+        onSubmit: handleSubmit,
+        onDelete: handleDelete,
+        onDuplicate: handleDuplicate,
+        onCancel
+      }
+    );
+  }
+);
+export {
+  ViewFormContainer
+};
+//# sourceMappingURL=ViewFormContainer.es.js.map

package/dist/shared/src/components/Views/ViewForm/ViewFormContainer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewFormContainer.es.js","sources":["../../../../../../src/components/Views/ViewForm/ViewFormContainer.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState, useCallback, useMemo } from 'react'\nimport { useCreateViewMutation, useGetViewQuery } from '@shared/api'\nimport {\n  ViewListItemModel,\n  OverviewViewModel,\n  TaskProgressViewModel,\n} from '@shared/api/generated/views'\nimport { ViewForm } from './ViewForm'\nimport type { ViewFormData, ViewType } from '..'\n\ninterface ViewData extends ViewListItemModel {\n  id: string\n}\n\ninterface ViewFormContainerProps {\n  initialData?: ViewFormData\n  viewId?: string // If provided, form is in edit mode\n  viewType: ViewType\n  project?: string\n  onSuccess?: (action: 'create' | 'update' | 'delete' | 'duplicate', data?: ViewData) => void\n  onCancel?: () => void\n}\n\nexport const ViewFormContainer = forwardRef<HTMLFormElement, ViewFormContainerProps>(\n  (\n    {\n      initialData = { label: '', scope: 'project', visibility: 'private' },\n      viewId,\n      viewType,\n      project,\n      onSuccess,\n      onCancel,\n    },\n    ref,\n  ) => {\n    const isEditing = !!viewId\n    const [error, setError] = useState<string | undefined>()\n\n    const [createView, { isLoading: createLoading }] = useCreateViewMutation()\n\n    const { data: viewData, isLoading: viewLoading } = useGetViewQuery(\n      { viewId: viewId as string, viewType, project },\n      { skip: !viewId },\n    )\n\n    const handleSubmit = useCallback(\n      async (formData: ViewFormData) => {\n        try {\n          setError(undefined)\n\n          if (isEditing && viewId) {\n            // TODO: Implement update mutation when available\n            console.log('Update view - would update with data:', formData)\n            // For now, just call onSuccess without making API call\n            const viewData: ViewData = {\n              id: viewId,\n              label: formData.label,\n              scope: formData.scope,\n              visibility: formData.visibility,\n            }\n            onSuccess?.('update', viewData)\n          } else {\n            // Create new view with basic settings structure\n            let payload: OverviewViewModel | TaskProgressViewModel\n\n            if (viewType === 'overview') {\n              payload = {\n                label: formData.label,\n                scope: formData.scope,\n                visibility: formData.visibility,\n                settings: {},\n                viewType: 'overview',\n              } as OverviewViewModel\n            } else {\n              payload = {\n                label: formData.label,\n                scope: formData.scope,\n                visibility: formData.visibility,\n                settings: { expanded: false },\n                viewType: 'taskProgress',\n              } as TaskProgressViewModel\n            }\n\n            const result = await createView({\n              viewType: viewType,\n              project,\n              payload,\n            }).unwrap()\n\n            const viewData: ViewData = {\n              id: result.id,\n              label: formData.label,\n              scope: formData.scope,\n              visibility: formData.visibility,\n            }\n\n            onSuccess?.('create', viewData)\n          }\n        } catch (err: any) {\n          setError(err?.message || 'Failed to save view')\n          console.error('Error saving view:', err)\n        }\n      },\n      [isEditing, viewId, viewType, project, createView, onSuccess],\n    )\n\n    const handleDelete = useCallback(async () => {\n      if (!viewId) return\n\n      try {\n        setError(undefined)\n        // TODO: Implement delete mutation when available\n        console.log('Delete view - not implemented yet')\n        onSuccess?.('delete')\n      } catch (err: any) {\n        setError(err?.message || 'Failed to delete view')\n        console.error('Error deleting view:', err)\n      }\n    }, [viewId, onSuccess])\n\n    const handleDuplicate = useCallback(async () => {\n      if (!viewId) return\n\n      try {\n        setError(undefined)\n        // TODO: Implement duplicate functionality when available\n        console.log('Duplicate view - not implemented yet')\n        onSuccess?.('duplicate')\n      } catch (err: any) {\n        setError(err?.message || 'Failed to duplicate view')\n        console.error('Error duplicating view:', err)\n      }\n    }, [viewId, onSuccess])\n\n    const isLoading = createLoading || viewLoading\n\n    console.log('render ViewFormContainer with data:')\n\n    return (\n      <ViewForm\n        ref={ref}\n        initialData={isEditing ? viewData : initialData}\n        error={error}\n        isEditing={isEditing}\n        isLoading={isLoading}\n        viewLoading={viewLoading}\n        onSubmit={handleSubmit}\n        onDelete={handleDelete}\n        onDuplicate={handleDuplicate}\n        onCancel={onCancel}\n      />\n    )\n  },\n)\n"],"names":["viewData","jsx"],"mappings":"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"}

package/dist/shared/src/components/Views/ViewItem/ViewItem.cjs.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const ViewItem_styled = require("./ViewItem.styled.cjs.js");
+const clsx = require("clsx");
+const ViewItem = React.forwardRef(
+  ({
+    label,
+    startContent,
+    endContent,
+    isSelected,
+    isEditable,
+    isPersonal,
+    onEdit,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+      ViewItem_styled.ViewItem,
+      {
+        ...props,
+        className: clsx(className, { selected: isSelected, personal: isPersonal }),
+        ref,
+        children: [
+          startContent && startContent,
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "label", children: label }),
+          isEditable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewItem_styled.MoreButton, { variant: "text", icon: "more_horiz", className: "more", onClick: onEdit }),
+          endContent && endContent
+        ]
+      }
+    );
+  }
+);
+exports.ViewItem = ViewItem;
+//# sourceMappingURL=ViewItem.cjs.js.map

package/dist/shared/src/components/Views/ViewItem/ViewItem.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.cjs.js","sources":["../../../../../../src/components/Views/ViewItem/ViewItem.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport * as Styled from './ViewItem.styled'\nimport clsx from 'clsx'\n\nexport interface ViewItem {\n  id: string\n  label: string\n  startContent?: ReactNode\n  endContent?: ReactNode\n  isSelected?: boolean\n  isEditable?: boolean\n  isPersonal?: boolean\n  onEdit?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void\n}\n\nexport interface ViewMenuItemProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'id'>,\n    ViewItem {}\n\nexport const ViewItem = forwardRef<HTMLLIElement, ViewMenuItemProps>(\n  (\n    {\n      label,\n      startContent,\n      endContent,\n      isSelected,\n      isEditable,\n      isPersonal,\n      onEdit,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Styled.ViewItem\n        {...props}\n        className={clsx(className, { selected: isSelected, personal: isPersonal })}\n        ref={ref}\n      >\n        {startContent && startContent}\n        <span className=\"label\">{label}</span>\n        {isEditable && (\n          <Styled.MoreButton variant=\"text\" icon=\"more_horiz\" className=\"more\" onClick={onEdit} />\n        )}\n        {endContent && endContent}\n      </Styled.ViewItem>\n    )\n  },\n)\n"],"names":["forwardRef","jsxs","Styled.ViewItem","jsx","Styled.MoreButton"],"mappings":";;;;;;AAoBO,MAAM,WAAWA,MAAA;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AAED,WAAAC,2BAAA,kBAAA;AAAA,MAACC,gBAAO;AAAA,MAAP;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,KAAK,WAAW,EAAE,UAAU,YAAY,UAAU,YAAY;AAAA,QACzE;AAAA,QAEC,UAAA;AAAA,UAAgB,gBAAA;AAAA,UAChBC,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,SAAS,UAAM,OAAA;AAAA,UAC9B,cACCA,2BAAA,kBAAA,IAACC,4BAAA,EAAkB,SAAQ,QAAO,MAAK,cAAa,WAAU,QAAO,SAAS,OAAQ,CAAA;AAAA,UAEvF,cAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;;"}

package/dist/shared/src/components/Views/ViewItem/ViewItem.es.js

@@ -0,0 +1,36 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef } from "react";
+import { ViewItem as ViewItem$1, MoreButton } from "./ViewItem.styled.es.js";
+import clsx from "clsx";
+const ViewItem = forwardRef(
+  ({
+    label,
+    startContent,
+    endContent,
+    isSelected,
+    isEditable,
+    isPersonal,
+    onEdit,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ViewItem$1,
+      {
+        ...props,
+        className: clsx(className, { selected: isSelected, personal: isPersonal }),
+        ref,
+        children: [
+          startContent && startContent,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "label", children: label }),
+          isEditable && /* @__PURE__ */ jsxRuntimeExports.jsx(MoreButton, { variant: "text", icon: "more_horiz", className: "more", onClick: onEdit }),
+          endContent && endContent
+        ]
+      }
+    );
+  }
+);
+export {
+  ViewItem
+};
+//# sourceMappingURL=ViewItem.es.js.map

package/dist/shared/src/components/Views/ViewItem/ViewItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.es.js","sources":["../../../../../../src/components/Views/ViewItem/ViewItem.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport * as Styled from './ViewItem.styled'\nimport clsx from 'clsx'\n\nexport interface ViewItem {\n  id: string\n  label: string\n  startContent?: ReactNode\n  endContent?: ReactNode\n  isSelected?: boolean\n  isEditable?: boolean\n  isPersonal?: boolean\n  onEdit?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void\n}\n\nexport interface ViewMenuItemProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'id'>,\n    ViewItem {}\n\nexport const ViewItem = forwardRef<HTMLLIElement, ViewMenuItemProps>(\n  (\n    {\n      label,\n      startContent,\n      endContent,\n      isSelected,\n      isEditable,\n      isPersonal,\n      onEdit,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Styled.ViewItem\n        {...props}\n        className={clsx(className, { selected: isSelected, personal: isPersonal })}\n        ref={ref}\n      >\n        {startContent && startContent}\n        <span className=\"label\">{label}</span>\n        {isEditable && (\n          <Styled.MoreButton variant=\"text\" icon=\"more_horiz\" className=\"more\" onClick={onEdit} />\n        )}\n        {endContent && endContent}\n      </Styled.ViewItem>\n    )\n  },\n)\n"],"names":["jsxs","Styled.ViewItem","jsx","Styled.MoreButton"],"mappings":";;;;AAoBO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AAED,WAAAA,kCAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,KAAK,WAAW,EAAE,UAAU,YAAY,UAAU,YAAY;AAAA,QACzE;AAAA,QAEC,UAAA;AAAA,UAAgB,gBAAA;AAAA,UAChBC,kCAAA,IAAA,QAAA,EAAK,WAAU,SAAS,UAAM,OAAA;AAAA,UAC9B,cACCA,kCAAA,IAACC,YAAA,EAAkB,SAAQ,QAAO,MAAK,cAAa,WAAU,QAAO,SAAS,OAAQ,CAAA;AAAA,UAEvF,cAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;"}

package/dist/shared/src/components/Views/ViewItem/ViewItem.styled.cjs.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const ViewItem = styled.li`
+  position: relative;
+  padding: 4px 6px 4px 12px;
+
+  &:has(.start-icon) {
+    padding-left: 8px;
+  }
+
+  height: 32px;
+  border-radius: var(--border-radius-m);
+
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  cursor: pointer;
+
+  .label {
+    flex: 1;
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  &.selected {
+    background-color: var(--md-sys-color-primary);
+    &,
+    .icon {
+      color: var(--md-sys-color-on-primary);
+    }
+
+    .more {
+      &:hover {
+        background-color: var(--md-sys-color-primary-hover);
+      }
+    }
+
+    /* personal view item uses secondary colors */
+    &.personal {
+      background-color: var(--md-sys-color-secondary-container);
+      &,
+      .icon {
+        color: var(--md-sys-color-on-secondary-container);
+      }
+    }
+  }
+`;
+const MoreButton = styled(ayonReactComponents.Button)`
+  &.hasIcon {
+    padding: 2px;
+  }
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest-hover);
+  }
+`;
+exports.MoreButton = MoreButton;
+exports.ViewItem = ViewItem;
+//# sourceMappingURL=ViewItem.styled.cjs.js.map

package/dist/shared/src/components/Views/ViewItem/ViewItem.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.styled.cjs.js","sources":["../../../../../../src/components/Views/ViewItem/ViewItem.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewItem = styled.li`\n  position: relative;\n  padding: 4px 6px 4px 12px;\n\n  &:has(.start-icon) {\n    padding-left: 8px;\n  }\n\n  height: 32px;\n  border-radius: var(--border-radius-m);\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  .label {\n    flex: 1;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary);\n    }\n\n    .more {\n      &:hover {\n        background-color: var(--md-sys-color-primary-hover);\n      }\n    }\n\n    /* personal view item uses secondary colors */\n    &.personal {\n      background-color: var(--md-sys-color-secondary-container);\n      &,\n      .icon {\n        color: var(--md-sys-color-on-secondary-container);\n      }\n    }\n  }\n`\n\nexport const MoreButton = styled(Button)`\n  &.hasIcon {\n    padding: 2px;\n  }\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n`\n"],"names":["Button"],"mappings":";;;;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDlB,MAAA,aAAa,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;"}

package/dist/shared/src/components/Views/ViewItem/ViewItem.styled.es.js

@@ -0,0 +1,63 @@
+import { Button } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+const ViewItem = styled.li`
+  position: relative;
+  padding: 4px 6px 4px 12px;
+
+  &:has(.start-icon) {
+    padding-left: 8px;
+  }
+
+  height: 32px;
+  border-radius: var(--border-radius-m);
+
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  cursor: pointer;
+
+  .label {
+    flex: 1;
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  &.selected {
+    background-color: var(--md-sys-color-primary);
+    &,
+    .icon {
+      color: var(--md-sys-color-on-primary);
+    }
+
+    .more {
+      &:hover {
+        background-color: var(--md-sys-color-primary-hover);
+      }
+    }
+
+    /* personal view item uses secondary colors */
+    &.personal {
+      background-color: var(--md-sys-color-secondary-container);
+      &,
+      .icon {
+        color: var(--md-sys-color-on-secondary-container);
+      }
+    }
+  }
+`;
+const MoreButton = styled(Button)`
+  &.hasIcon {
+    padding: 2px;
+  }
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest-hover);
+  }
+`;
+export {
+  MoreButton,
+  ViewItem
+};
+//# sourceMappingURL=ViewItem.styled.es.js.map

package/dist/shared/src/components/Views/ViewItem/ViewItem.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.styled.es.js","sources":["../../../../../../src/components/Views/ViewItem/ViewItem.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewItem = styled.li`\n  position: relative;\n  padding: 4px 6px 4px 12px;\n\n  &:has(.start-icon) {\n    padding-left: 8px;\n  }\n\n  height: 32px;\n  border-radius: var(--border-radius-m);\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  .label {\n    flex: 1;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary);\n    }\n\n    .more {\n      &:hover {\n        background-color: var(--md-sys-color-primary-hover);\n      }\n    }\n\n    /* personal view item uses secondary colors */\n    &.personal {\n      background-color: var(--md-sys-color-secondary-container);\n      &,\n      .icon {\n        color: var(--md-sys-color-on-secondary-container);\n      }\n    }\n  }\n`\n\nexport const MoreButton = styled(Button)`\n  &.hasIcon {\n    padding: 2px;\n  }\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDlB,MAAA,aAAa,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}