opacacms 0.1.0 → 0.1.2

package/dist/{chunk-2zm8cy1w.js → admin/webcomponent.js}

@@ -6,108 +6,49 @@ import {
   login,
   logout,
   syncSession
-} from "./chunk-16vgcf3k.js";
+} from "../chunk-16vgcf3k.js";
+import {
+  $config,
+  $needsInit,
+  $router,
+  api,
+  configureAPI,
+  createFetcherStore,
+  createMutatorStore,
+  getCurrentBaseURL,
+  setConfig,
+  setNeedsInit
+} from "../chunk-fa5mg0hr.js";
 import {
   $isSidebarCollapsed,
   $toasts,
   clearToast,
   notify,
   toggleSidebar
-} from "./chunk-j4d50hrx.js";
-import {
-  __require
-} from "./chunk-8sqjbsgt.js";
+} from "../chunk-j4d50hrx.js";
+import"../chunk-8sqjbsgt.js";
 
-// src/admin/router.ts
-import { createRouter } from "@nanostores/router";
-var $router = createRouter({
-  dashboard: "/admin",
-  collections: "/admin/collections/:slug",
-  document: "/admin/collections/:slug/:id",
-  globals: "/admin/globals/:slug",
-  settings: "/admin/settings"
-});
+// src/admin/webcomponent.tsx
+import r2wc from "@r2wc/react-to-web-component";
 
-// src/admin/stores/config.ts
-import { atom } from "nanostores";
-var $config = atom(null);
-var $needsInit = atom(false);
-var $isFetchingConfig = atom(false);
-var $hasMetadataError = atom(false);
-function setConfig(config) {
-  $config.set(config);
-}
-function setNeedsInit(needs) {
-  $needsInit.set(needs);
-}
-
-// src/admin/stores/query.ts
-import { nanoquery } from "@nanostores/query";
-
-// src/admin/api-client.ts
-import ky from "ky";
-var client = null;
-var currentBaseURL = null;
-var configureAPI = (serverUrl) => {
-  if (!serverUrl || !serverUrl.startsWith("http"))
-    return;
-  const url = serverUrl;
-  const baseURL = url.replace(/\/$/, "");
-  if (client && currentBaseURL === baseURL)
-    return;
-  currentBaseURL = baseURL;
-  client = ky.create({
-    prefixUrl: baseURL,
-    credentials: "include",
-    retry: 0,
-    hooks: {
-      afterResponse: [
-        async (_request, _options, response) => {
-          if (response.status === 401 || response.status === 403) {
-            try {
-              const { $session: $session2 } = await import("./chunk-xa7rjsn2.js");
-              const { notify: notify2 } = await import("./chunk-jwjk85ze.js");
-              $session2.set(null);
-              notify2("Session expired. Please log in again.", "error");
-            } catch (e) {}
-          }
-        }
-      ]
-    }
-  });
-};
-var getCurrentBaseURL = () => {
-  if (!currentBaseURL) {
-    throw new Error("API client not configured. Did you provide a valid serverUrl?");
-  }
-  return currentBaseURL;
-};
-var api = new Proxy({}, {
-  get(_, prop) {
-    if (!client) {
-      throw new Error("API client not configured. Did you provide a valid serverUrl?");
-    }
-    if (!client)
-      throw new Error("API client not configured");
-    const c = client;
-    if (c) {
-      return c[prop];
-    }
-    return;
-  }
-});
+// src/admin/ui/admin-client.tsx
+import { useStore as useStore10 } from "@nanostores/react";
+import { Loader2 as Loader211 } from "lucide-react";
+import { useCallback as useCallback10, useEffect as useEffect19, useState as useState26 } from "react";
 
-// src/admin/stores/query.ts
-var [
-  createFetcherStore,
-  createMutatorStore,
-  { invalidateKeys, revalidateKeys, mutateCache }
-] = nanoquery({
-  fetcher: (...keys) => {
-    const url = keys.join("");
-    return api.get(url).json();
-  }
-});
+// src/admin/ui/admin-layout.tsx
+import { useStore } from "@nanostores/react";
+import * as LucideIcons from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Database,
+  Globe,
+  Image,
+  LayoutDashboard,
+  LogOut,
+  Settings
+} from "lucide-react";
 
 // src/admin/ui/components/link.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
@@ -132,20 +73,6 @@ function Link({ href, params, search, children, onClick, ...props }) {
   }, undefined, false, undefined, this);
 }
 
-// src/admin/ui/admin-layout.tsx
-import { useStore } from "@nanostores/react";
-import * as LucideIcons from "lucide-react";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Database,
-  Globe,
-  Image,
-  LayoutDashboard,
-  LogOut,
-  Settings
-} from "lucide-react";
-
 // src/admin/ui/components/ui/accordion.tsx
 import * as React from "react";
 
@@ -209,6 +136,7 @@ var Accordion = ({
     ]
   }, undefined, true, undefined, this);
 };
+
 // src/admin/ui/components/ui/blocks.tsx
 import * as React2 from "react";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
@@ -237,6 +165,7 @@ var Blocks = React2.forwardRef(({ className, label, children, ...props }, ref) =
   }, undefined, true, undefined, this);
 });
 Blocks.displayName = "Blocks";
+
 // src/admin/ui/components/ui/button.tsx
 import * as React3 from "react";
 import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
@@ -248,6 +177,7 @@ var Button = React3.forwardRef(({ className, variant = "default", size = "defaul
   }, undefined, false, undefined, this);
 });
 Button.displayName = "Button";
+
 // src/admin/ui/components/ui/collapsible.tsx
 import * as React4 from "react";
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
@@ -325,6 +255,7 @@ var CollapsibleContent = React4.forwardRef(({ className, children, ...props }, r
   }, undefined, false, undefined, this);
 });
 CollapsibleContent.displayName = "CollapsibleContent";
+
 // src/admin/ui/components/ui/dialog.tsx
 import { createPortal } from "react-dom";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
@@ -397,6 +328,7 @@ function DialogFooter({
     children
   }, undefined, false, undefined, this);
 }
+
 // src/admin/ui/components/ui/group.tsx
 import * as React5 from "react";
 import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
@@ -415,6 +347,7 @@ var Group = React5.forwardRef(({ className, label, children, ...props }, ref) =>
   }, undefined, true, undefined, this);
 });
 Group.displayName = "Group";
+
 // src/admin/ui/components/ui/input.tsx
 import * as React6 from "react";
 import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
@@ -427,6 +360,7 @@ var Input = React6.forwardRef(({ className, type, ...props }, ref) => {
   }, undefined, false, undefined, this);
 });
 Input.displayName = "Input";
+
 // src/admin/ui/components/ui/join.tsx
 import * as React7 from "react";
 import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
@@ -482,6 +416,7 @@ var Join = React7.forwardRef(({ className, label, collection, children, ...props
   }, undefined, true, undefined, this);
 });
 Join.displayName = "Join";
+
 // src/admin/ui/components/ui/label.tsx
 import * as React8 from "react";
 import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
@@ -491,6 +426,7 @@ var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   ...props
 }, undefined, false, undefined, this));
 Label.displayName = "Label";
+
 // src/admin/ui/components/ui/radio-group.tsx
 import * as React9 from "react";
 import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
@@ -535,6 +471,7 @@ var RadioGroupItem = React9.forwardRef(({ className, value, disabled, id, ...pro
   }, undefined, false, undefined, this);
 });
 RadioGroupItem.displayName = "RadioGroupItem";
+
 // src/admin/ui/components/ui/relationship.tsx
 import * as React10 from "react";
 import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
@@ -588,6 +525,7 @@ var Relationship = React10.forwardRef(({ className, label, relationTo, children,
   }, undefined, true, undefined, this);
 });
 Relationship.displayName = "Relationship";
+
 // src/admin/ui/components/ui/scroll-area.tsx
 import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
 function ScrollArea({ children, className, maxHeight, ...props }) {
@@ -598,6 +536,7 @@ function ScrollArea({ children, className, maxHeight, ...props }) {
     children
   }, undefined, false, undefined, this);
 }
+
 // src/admin/ui/components/ui/select.tsx
 import { ChevronDown } from "lucide-react";
 import * as React11 from "react";
@@ -752,6 +691,7 @@ function SelectSeparator() {
     className: "opaca-ui-select-separator"
   }, undefined, false, undefined, this);
 }
+
 // src/admin/ui/components/ui/separator.tsx
 import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
 var Separator = ({
@@ -765,6 +705,7 @@ var Separator = ({
     role: "none"
   }, undefined, false, undefined, this);
 };
+
 // src/admin/ui/components/ui/sheet.tsx
 import { createPortal as createPortal3 } from "react-dom";
 import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
@@ -878,6 +819,7 @@ function SheetFooter({
     children
   }, undefined, false, undefined, this);
 }
+
 // src/admin/ui/components/ui/tabs.tsx
 import * as React12 from "react";
 import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
@@ -948,6 +890,7 @@ var TabsContent = React12.forwardRef(({ className, value, ...props }, ref) => {
   }, undefined, false, undefined, this);
 });
 TabsContent.displayName = "TabsContent";
+
 // src/admin/ui/admin-layout.tsx
 import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
 function AdminLayout({ children, config, user, onLogout }) {
@@ -1057,19 +1000,19 @@ function AdminLayout({ children, config, user, onLogout }) {
                           isCollapsed,
                           children: config.globals.map((g) => {
                             const href = `/admin/globals/${g.slug}`;
-                            const label2 = g.label || g.slug.charAt(0).toUpperCase() + g.slug.slice(1);
+                            const label = g.label || g.slug.charAt(0).toUpperCase() + g.slug.slice(1);
                             const IconComponent = g.icon && g.icon in LucideIcons ? LucideIcons[g.icon] : Globe;
                             return /* @__PURE__ */ jsxDEV18(Link, {
                               href,
                               className: `opaca-nav-item ${currentPath === href ? "active" : ""}`,
-                              title: label2,
+                              title: label,
                               children: [
                                 /* @__PURE__ */ jsxDEV18(IconComponent, {
                                   size: 16
                                 }, undefined, false, undefined, this),
                                 /* @__PURE__ */ jsxDEV18("span", {
                                   className: "opaca-nav-label",
-                                  children: label2
+                                  children: label
                                 }, undefined, false, undefined, this)
                               ]
                             }, g.slug, true, undefined, this);
@@ -1322,11 +1265,6 @@ function ToastContainer({
   }, undefined, false, undefined, this);
 }
 
-// src/admin/ui/admin-client.tsx
-import { useStore as useStore10 } from "@nanostores/react";
-import { Loader2 as Loader211 } from "lucide-react";
-import { useCallback as useCallback10, useEffect as useEffect19, useState as useState26 } from "react";
-
 // src/admin/ui/views/collection-list-view.tsx
 import { useStore as useStore5 } from "@nanostores/react";
 import {
@@ -1375,8 +1313,8 @@ function traverseNodes(children) {
 }
 
 // src/admin/stores/admin-queries.ts
-import { atom as atom2, computed } from "nanostores";
-var $collectionQuery = atom2(null);
+import { atom, computed } from "nanostores";
+var $collectionQuery = atom(null);
 var $collectionUrl = computed($collectionQuery, (params) => {
   if (!params)
     return null;
@@ -1412,7 +1350,7 @@ var $collectionUrl = computed($collectionQuery, (params) => {
 var $collectionData = createFetcherStore([
   $collectionUrl
 ]);
-var $documentQuery = atom2(null);
+var $documentQuery = atom(null);
 var $documentUrl = computed($documentQuery, (params) => {
   if (!params)
     return null;
@@ -1428,7 +1366,7 @@ var $saveDocument = createMutatorStore(async ({ data, revalidate }) => {
   revalidate(`api/${slug}/${id}`);
   return res;
 });
-var $globalQuery = atom2(null);
+var $globalQuery = atom(null);
 var $globalUrl = computed($globalQuery, (slug) => {
   if (!slug)
     return null;
@@ -1858,16 +1796,16 @@ import React14, { useMemo as useMemo4, useRef as useRef4, useState as useState8
 
 // src/admin/stores/media.ts
 import { persistentAtom as persistentAtom2 } from "@nanostores/persistent";
-import { atom as atom3 } from "nanostores";
+import { atom as atom2 } from "nanostores";
 var $mediaViewMode = persistentAtom2("opaca-media-view-mode", "grid");
 var $mediaSelectedBucket = persistentAtom2("opaca-media-selected-bucket", "all");
 var $bucketColors = persistentAtom2("opaca-bucket-colors", {}, {
   encode: JSON.stringify,
   decode: JSON.parse
 });
-var $mediaCurrentFolder = atom3("");
-var $mediaSearch = atom3("");
-var $mediaPage = atom3(1);
+var $mediaCurrentFolder = atom2("");
+var $mediaSearch = atom2("");
+var $mediaPage = atom2(1);
 var $assets = createFetcherStore(["api/__system/assets", $mediaSelectedBucket, $mediaCurrentFolder, $mediaSearch, $mediaPage], {
   fetcher: (base, bucket, folder, search, page) => {
     const params = new URLSearchParams({
@@ -3053,7 +2991,7 @@ function RichTextEditor({
 import { jsxDEV as jsxDEV29 } from "react/jsx-dev-runtime";
 var DataDetailView = ({
   data,
-  label: label2,
+  label,
   depth = 0,
   isEditing,
   onChange
@@ -4334,7 +4272,7 @@ var capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 import { jsxDEV as jsxDEV34 } from "react/jsx-dev-runtime";
 var ArrayField = ({
   name,
-  label: label2,
+  label,
   fields = [],
   value = [],
   onChange,
@@ -4401,7 +4339,7 @@ var ArrayField = ({
           htmlFor: name,
           className: "opaca-label",
           style: { marginBottom: 0 },
-          children: label2 || capitalize(name)
+          children: label || capitalize(name)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV34("div", {
@@ -4482,8 +4420,8 @@ import { Plus as Plus3, Trash2 as Trash23 } from "lucide-react";
 import { jsxDEV as jsxDEV35 } from "react/jsx-dev-runtime";
 var BlocksField = ({
   name,
-  label: label2,
-  blocks: blocks2,
+  label,
+  blocks,
   value = [],
   onChange,
   disabled,
@@ -4492,7 +4430,7 @@ var BlocksField = ({
 }) => {
   const addBlock = (blockSlug) => {
     const currentValue = Array.isArray(value) ? value : [];
-    const blockDef = blocks2.find((b) => b.slug === blockSlug);
+    const blockDef = blocks.find((b) => b.slug === blockSlug);
     const initialData = { blockType: blockSlug };
     if (blockDef) {
       blockDef.fields.forEach((f) => {
@@ -4531,13 +4469,13 @@ var BlocksField = ({
     onChange(newValue);
   };
   return /* @__PURE__ */ jsxDEV35(Blocks, {
-    label: label2 || name,
+    label: label || name,
     className: "opaca-blocks-field",
     children: /* @__PURE__ */ jsxDEV35("div", {
       style: { display: "flex", flexDirection: "column", gap: "24px" },
       children: [
         (Array.isArray(value) ? value : []).map((item, index) => {
-          const blockDef = blocks2.find((b) => b.slug === item.blockType);
+          const blockDef = blocks.find((b) => b.slug === item.blockType);
           if (!blockDef)
             return null;
           return /* @__PURE__ */ jsxDEV35("div", {
@@ -4632,7 +4570,7 @@ var BlocksField = ({
                 gap: "0.75rem",
                 justifyContent: "center"
               },
-              children: blocks2.map((block) => /* @__PURE__ */ jsxDEV35(Button, {
+              children: blocks.map((block) => /* @__PURE__ */ jsxDEV35(Button, {
                 type: "button",
                 variant: "outline",
                 size: "sm",
@@ -4657,7 +4595,7 @@ var BlocksField = ({
 import { jsxDEV as jsxDEV36 } from "react/jsx-dev-runtime";
 var BooleanField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   disabled,
@@ -4672,7 +4610,7 @@ var BooleanField = ({
       /* @__PURE__ */ jsxDEV36("label", {
         className: "opaca-label",
         htmlFor: `field-${name}`,
-        children: label2 || name
+        children: label || name
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV36("label", {
         className: "opaca-switch",
@@ -4708,7 +4646,7 @@ var BooleanField = ({
 // src/admin/ui/components/fields/CollapsibleField.tsx
 import { jsxDEV as jsxDEV37 } from "react/jsx-dev-runtime";
 var CollapsibleField = ({
-  label: label2,
+  label,
   fields,
   parentData,
   disabled,
@@ -4736,7 +4674,7 @@ var CollapsibleField = ({
     children: [
       /* @__PURE__ */ jsxDEV37(CollapsibleTrigger, {
         className: "opaca-collapsible-field-trigger",
-        children: dynamicTitle || label2 || "Section"
+        children: dynamicTitle || label || "Section"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV37(CollapsibleContent, {
         children: /* @__PURE__ */ jsxDEV37("div", {
@@ -4760,7 +4698,7 @@ var CollapsibleField = ({
 import { jsxDEV as jsxDEV38 } from "react/jsx-dev-runtime";
 var DateField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   required,
@@ -4776,7 +4714,7 @@ var DateField = ({
         className: "opaca-label",
         htmlFor: `field-${name}`,
         children: [
-          label2 || name,
+          label || name,
           required && /* @__PURE__ */ jsxDEV38("span", {
             style: { color: "var(--opaca-error)", marginLeft: "4px" },
             children: "*"
@@ -4806,7 +4744,7 @@ import { useEffect as useEffect12, useState as useState16 } from "react";
 import { jsxDEV as jsxDEV39, Fragment as Fragment8 } from "react/jsx-dev-runtime";
 var FileField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   options,
@@ -4909,7 +4847,7 @@ var FileField = ({
         className: "file-field-label-row",
         children: [
           /* @__PURE__ */ jsxDEV39("label", {
-            children: label2 || name
+            children: label || name
           }, undefined, false, undefined, this),
           uploadError && /* @__PURE__ */ jsxDEV39("span", {
             className: "upload-error",
@@ -5103,7 +5041,7 @@ var FileField = ({
 import { jsxDEV as jsxDEV40 } from "react/jsx-dev-runtime";
 var GroupField = ({
   name,
-  label: label2,
+  label,
   fields,
   value,
   onChange,
@@ -5118,7 +5056,7 @@ var GroupField = ({
     });
   };
   return /* @__PURE__ */ jsxDEV40(Group, {
-    label: label2 || name,
+    label: label || name,
     className: "opaca-group-field",
     children: /* @__PURE__ */ jsxDEV40("div", {
       className: "opaca-group-fields-container",
@@ -5133,11 +5071,11 @@ var GroupField = ({
 
 // src/admin/ui/components/fields/JoinField.tsx
 import { jsxDEV as jsxDEV41 } from "react/jsx-dev-runtime";
-var JoinField = ({ name, label: label2, collection, value, on }) => {
+var JoinField = ({ name, label, collection, value, on }) => {
   return /* @__PURE__ */ jsxDEV41("div", {
     className: "opaca-form-group",
     children: /* @__PURE__ */ jsxDEV41(Join, {
-      label: label2 || name,
+      label: label || name,
       collection,
       on
     }, undefined, false, undefined, this)
@@ -5148,7 +5086,7 @@ var JoinField = ({ name, label: label2, collection, value, on }) => {
 import { jsxDEV as jsxDEV42 } from "react/jsx-dev-runtime";
 var NumberField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   required,
@@ -5164,7 +5102,7 @@ var NumberField = ({
         className: "opaca-label",
         htmlFor: `field-${name}`,
         children: [
-          label2 || name,
+          label || name,
           required && /* @__PURE__ */ jsxDEV42("span", {
             style: { color: "var(--opaca-error)", marginLeft: "4px" },
             children: "*"
@@ -5179,7 +5117,7 @@ var NumberField = ({
         readOnly,
         disabled,
         onChange: (e) => onChange(e.target.valueAsNumber || 0),
-        placeholder: placeholder || `Enter ${label2 || name}...`,
+        placeholder: placeholder || `Enter ${label || name}...`,
         required
       }, undefined, false, undefined, this),
       error && /* @__PURE__ */ jsxDEV42("span", {
@@ -5194,7 +5132,7 @@ var NumberField = ({
 import { jsxDEV as jsxDEV43 } from "react/jsx-dev-runtime";
 var RadioField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   choices,
@@ -5210,7 +5148,7 @@ var RadioField = ({
       /* @__PURE__ */ jsxDEV43("label", {
         className: "opaca-label",
         children: [
-          label2 || name,
+          label || name,
           required && /* @__PURE__ */ jsxDEV43("span", {
             style: { color: "var(--opaca-error)", marginLeft: "4px" },
             children: "*"
@@ -5378,7 +5316,7 @@ var RelationshipDetailSheet = ({
 import { jsxDEV as jsxDEV45 } from "react/jsx-dev-runtime";
 var RelationshipField = ({
   name,
-  label: label2,
+  label,
   relationTo,
   value,
   onChange,
@@ -5437,7 +5375,7 @@ var RelationshipField = ({
     className: "opaca-form-group",
     children: [
       /* @__PURE__ */ jsxDEV45(Relationship, {
-        label: label2 || name,
+        label: label || name,
         relationTo,
         className: error ? "error" : "",
         onClick: () => !disabled && !readOnly && setIsOpen(true),
@@ -5659,7 +5597,7 @@ var RowField = ({
 import { jsxDEV as jsxDEV47 } from "react/jsx-dev-runtime";
 var SelectField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   choices,
@@ -5676,7 +5614,7 @@ var SelectField = ({
         className: "opaca-label",
         htmlFor: `field-${name}`,
         children: [
-          label2 || name,
+          label || name,
           required && /* @__PURE__ */ jsxDEV47("span", {
             style: { color: "var(--opaca-error)", marginLeft: "4px" },
             children: "*"
@@ -5687,7 +5625,7 @@ var SelectField = ({
         value,
         onValueChange: onChange,
         disabled: disabled || readOnly,
-        placeholder: placeholder || `Select ${label2 || name}...`,
+        placeholder: placeholder || `Select ${label || name}...`,
         children: [
           /* @__PURE__ */ jsxDEV47(SelectTrigger, {
             className: error ? "error" : "",
@@ -5716,14 +5654,14 @@ var SelectField = ({
 import React16 from "react";
 import { jsxDEV as jsxDEV48 } from "react/jsx-dev-runtime";
 var TabsField = ({
-  tabs: tabs2,
+  tabs,
   value,
   onChange,
   disabled,
   readOnly,
   renderField
 }) => {
-  const [activeTab, setActiveTab] = React16.useState(tabs2?.[0]?.label || "");
+  const [activeTab, setActiveTab] = React16.useState(tabs?.[0]?.label || "");
   const handleFieldChange = (fieldName, fieldValue) => {
     if (value !== undefined) {
       onChange({
@@ -5734,7 +5672,7 @@ var TabsField = ({
       onChange(fieldName, fieldValue);
     }
   };
-  if (!tabs2 || tabs2.length === 0)
+  if (!tabs || tabs.length === 0)
     return null;
   return /* @__PURE__ */ jsxDEV48("div", {
     className: "opaca-tabs-field",
@@ -5743,13 +5681,13 @@ var TabsField = ({
       onValueChange: setActiveTab,
       children: [
         /* @__PURE__ */ jsxDEV48(TabsList, {
-          children: tabs2.map((tab) => /* @__PURE__ */ jsxDEV48(TabsTrigger, {
+          children: tabs.map((tab) => /* @__PURE__ */ jsxDEV48(TabsTrigger, {
             value: tab.label,
             children: tab.label
           }, tab.label, false, undefined, this))
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV48("div", {
-          children: tabs2.map((tab) => /* @__PURE__ */ jsxDEV48(TabsContent, {
+          children: tabs.map((tab) => /* @__PURE__ */ jsxDEV48(TabsContent, {
             value: tab.label,
             children: /* @__PURE__ */ jsxDEV48("div", {
               style: {
@@ -5786,7 +5724,7 @@ var TabsField = ({
 import { jsxDEV as jsxDEV49 } from "react/jsx-dev-runtime";
 var TextAreaField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   required,
@@ -5802,7 +5740,7 @@ var TextAreaField = ({
         className: "opaca-label",
         htmlFor: `field-${name}`,
         children: [
-          label2 || name,
+          label || name,
           required && /* @__PURE__ */ jsxDEV49("span", {
             style: { color: "var(--opaca-error)", marginLeft: "4px" },
             children: "*"
@@ -5825,7 +5763,7 @@ var TextAreaField = ({
           const val = e.target.value;
           onChange(val === "" && !required ? null : val);
         },
-        placeholder: placeholder || `Enter ${label2 || name}...`,
+        placeholder: placeholder || `Enter ${label || name}...`,
         required
       }, undefined, false, undefined, this),
       error && /* @__PURE__ */ jsxDEV49("span", {
@@ -5840,7 +5778,7 @@ var TextAreaField = ({
 import { jsxDEV as jsxDEV50 } from "react/jsx-dev-runtime";
 var TextField = ({
   name,
-  label: label2,
+  label,
   value,
   onChange,
   required,
@@ -5856,7 +5794,7 @@ var TextField = ({
         className: "opaca-label",
         htmlFor: `field-${name}`,
         children: [
-          label2 || name,
+          label || name,
           required && /* @__PURE__ */ jsxDEV50("span", {
             style: { color: "var(--opaca-error)", marginLeft: "4px" },
             children: "*"
@@ -5874,7 +5812,7 @@ var TextField = ({
           const val = e.target.value;
           onChange(val === "" && !required ? null : val);
         },
-        placeholder: placeholder || `Enter ${label2 || name}...`,
+        placeholder: placeholder || `Enter ${label || name}...`,
         required
       }, undefined, false, undefined, this),
       error && /* @__PURE__ */ jsxDEV50("span", {
@@ -5887,7 +5825,7 @@ var TextField = ({
 
 // src/admin/ui/components/fields/VirtualField.tsx
 import { jsxDEV as jsxDEV51 } from "react/jsx-dev-runtime";
-var VirtualField = ({ name, label: label2, value }) => {
+var VirtualField = ({ name, label, value }) => {
   const displayValue = value === null || value === undefined ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
   return /* @__PURE__ */ jsxDEV51("div", {
     className: "opaca-form-group",
@@ -5896,7 +5834,7 @@ var VirtualField = ({ name, label: label2, value }) => {
         className: "opaca-label",
         htmlFor: `field-${name}`,
         children: [
-          label2 || name,
+          label || name,
           /* @__PURE__ */ jsxDEV51("span", {
             style: {
               color: "rgba(255, 255, 255, 0.4)",
@@ -9479,4 +9417,14 @@ function AdminClient({
   }, undefined, true, undefined, this);
 }
 
-export { $router, $config, $needsInit, $isFetchingConfig, $hasMetadataError, setConfig, setNeedsInit, createFetcherStore, createMutatorStore, invalidateKeys, revalidateKeys, mutateCache, Link, AdminLayout, Breadcrumbs, Toast, ToastContainer, AdminClient };
+// src/admin/webcomponent.tsx
+var OpacaAdminWebComponent = r2wc(AdminClient, {
+  props: {
+    serverUrl: "string",
+    config: "json",
+    initialNeedsInit: "boolean"
+  }
+});
+if (typeof window !== "undefined" && !customElements.get("opaca-admin")) {
+  customElements.define("opaca-admin", OpacaAdminWebComponent);
+}