@lobb-js/studio 0.35.0 → 0.37.0

package/dist/components/canAccess.svelte

@@ -14,7 +14,7 @@
 	import type { Snippet } from "svelte";
 	import { onMount } from "svelte";
 	import { getStudioContext } from "../context";
-	import { emitEvent } from "../eventSystem";
+	import { checkAuthAccess } from "../eventSystem";
 
 	interface Props {
 		collection: string;
@@ -31,17 +31,7 @@
 	let allowed = $state<boolean | null>(null);
 
 	onMount(async () => {
-		try {
-			const result = await emitEvent({ lobb, ctx }, "auth.canAccess", {
-				collection,
-				action,
-			});
-			allowed = result === true;
-		} catch {
-			// No handler registered (auth extension not loaded), or the
-			// handler threw — fail closed.
-			allowed = false;
-		}
+		allowed = await checkAuthAccess({ lobb, ctx }, collection, action);
 	});
 </script>
 

package/dist/components/dataTable/dataTable.svelte

@@ -165,6 +165,7 @@
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
+    let hasLoaded = $state(false);
     const columns: TableProps["columns"] = $state(
         getCollectionColumns(ctx, collectionName),
     );
@@ -197,6 +198,7 @@
         totalCount = res.meta.totalCount;
         onDataLoad?.(totalCount);
         loading = false;
+        hasLoaded = true;
     }
 
     async function handleDelete(entryId: string) {
@@ -297,6 +299,7 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
+            {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
@@ -310,7 +313,7 @@
     <div class="relative flex-1 overflow-auto w-full">
         {#key activeTabFilter}
             <div class="h-full w-full" in:fade={{ duration: 120 }}>
-                {#if loading}
+                {#if loading && !hasLoaded}
                     <div class="flex flex-col gap-2 p-2 w-full">
                         <Skeleton class="h-8 w-full" />
                         <Skeleton class="h-8 w-[80%]" />

package/dist/components/dataTable/header.svelte

@@ -3,7 +3,7 @@
     import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
-    import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
+    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
@@ -26,6 +26,7 @@
         onLink?: (record: any) => void;
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
+        loading?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -37,6 +38,7 @@
         onLink,
         onCreate,
         showImport = true,
+        loading = false,
         left
     }: Props = $props();
 
@@ -162,10 +164,15 @@
             variant="ghost"
             size="sm"
             class="text-muted-foreground"
-            Icon={ListRestart}
             onclick={() => (params = { ...params })}
         >
-            {headerIsSmall ? "" : "Refresh"}
+            {#if loading}
+                <LoaderCircle size={16} class="animate-spin" />
+                {headerIsSmall ? "" : "Loading"}
+            {:else}
+                <ListRestart size={16} />
+                {headerIsSmall ? "" : "Refresh"}
+            {/if}
         </Button>
         {#if showImport}
             <CanAccess collection={collectionName} action="create">

package/dist/components/dataTable/header.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     onLink?: (record: any) => void;
     onCreate?: (changes: Changes) => void;
     showImport?: boolean;
+    loading?: boolean;
     left?: Snippet<[]>;
 }
 declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params">;

package/dist/components/detailView/create/createDetailViewChildren.svelte

@@ -95,8 +95,8 @@
                         showImport={false}
                         showHeader={true}
                         showFooter={false}
-                        showDelete={false}
-                        showEdit={false}
+                        showDelete={true}
+                        showEdit={true}
                         tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
                     >
                         {#snippet headerLeft()}

package/dist/components/importButton.svelte

@@ -86,7 +86,23 @@
 			});
 	}
 
-	function detectAndParse(content: string): any[] {
+	async function detectAndParse(content: string): Promise<any[]> {
+		// Give projects a chance to take over parsing for non-standard
+		// formats (preamble rows, multi-line cells, vendor exports, …) by
+		// registering a workflow on `studio.collections.import.parse`. The
+		// workflow receives the raw text and sets `handled: true` along
+		// with its own `rows`; if no workflow takes over, we fall through
+		// to the built-in JSON / simple-CSV detector.
+		const result = await emitEvent({ lobb, ctx }, "studio.collections.import.parse", {
+			collectionName,
+			content,
+			rows: null as any[] | null,
+			handled: false,
+		});
+		if (result?.handled && Array.isArray(result.rows)) {
+			return result.rows;
+		}
+
 		const trimmed = content.trim();
 		if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
 			const parsed = JSON.parse(trimmed);
@@ -98,7 +114,7 @@
 	async function processContent(content: string) {
 		parseError = "";
 		try {
-			const rows = detectAndParse(content);
+			const rows = await detectAndParse(content);
 			if (rows.length === 0) throw new Error("No data rows found");
 			transformedRows = applyColumnMapping(rows);
 			step = "preview";

package/dist/components/mainNavShared.js

@@ -1,14 +1,10 @@
 import { House, Layers, Library, Workflow } from "lucide-svelte";
-import { emitEvent } from "../eventSystem";
+import { checkAuthAccess } from "../eventSystem";
 import { getDashboardNavs } from "../extensions/extensionUtils";
 async function isItemVisible(lobb, ctx, item) {
     if (!item.represents)
         return true;
-    const res = await emitEvent({ lobb, ctx }, "auth.canAccess", {
-        collection: item.represents,
-        action: "read",
-    });
-    return res === true;
+    return checkAuthAccess({ lobb, ctx }, item.represents, "read");
 }
 export async function buildNavSections(lobb, ctx) {
     const rawSections = [

package/dist/components/routes/collections/collections.svelte

@@ -2,7 +2,7 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
-    import { emitEvent } from "../../../eventSystem";
+    import { checkAuthAccess } from "../../../eventSystem";
     import Collection from "./collection.svelte";
     import { onMount } from "svelte";
 
@@ -18,7 +18,7 @@
     let { collectionName } = $props();
 
     // Start empty so unreadable collections never flash. Populated after the
-    // auth.canAccess checks resolve below.
+    // Populated after checkAuthAccess calls resolve below.
     let collectionsList = $state<SideBarData>([]);
 
     onMount(async () => {
@@ -31,14 +31,9 @@
         );
         const visibleNames = (
             await Promise.all(
-                allNames.map(async (name) => {
-                    const res = await emitEvent(
-                        { lobb, ctx },
-                        "auth.canAccess",
-                        { collection: name, action: "read" },
-                    );
-                    return res === true ? name : null;
-                }),
+                allNames.map(async (name) =>
+                    (await checkAuthAccess({ lobb, ctx }, name, "read")) ? name : null
+                ),
             )
         ).filter((n): n is string => n !== null);
 

package/dist/components/ui/accordion/index.d.ts

@@ -2,5 +2,5 @@ import { Accordion as AccordionPrimitive } from "bits-ui";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -4,6 +4,6 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
 };
-declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/components/ui/command/command-input.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "value" | "ref">;
 type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

package/dist/components/ui/command/command.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "ref" | "value">;
+declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "value" | "ref">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/components/ui/input/input.svelte.d.ts

@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "placeholder" | "ref" | "value">;
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "value" | "ref" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { WithElementRef } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
-declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/eventSystem.d.ts

@@ -1,2 +1,3 @@
 import type { StudioContext } from "./context";
+export declare function checkAuthAccess(studioContext: StudioContext, collection: string, action: string): Promise<boolean>;
 export declare function emitEvent(studioContext: StudioContext, eventName: string, input: any): Promise<any>;

package/dist/eventSystem.js

@@ -1,5 +1,14 @@
 import { toast } from "svelte-sonner";
 import { openCreateDetailView, openUpdateDetailView } from "./actions";
+export async function checkAuthAccess(studioContext, collection, action) {
+    try {
+        const result = await emitEvent(studioContext, "auth.canAccess", { collection, action });
+        return result !== false;
+    }
+    catch {
+        return false;
+    }
+}
 export async function emitEvent(studioContext, eventName, input) {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter((workflow) => {

package/dist/extensions/extension.types.d.ts

@@ -69,6 +69,12 @@ export interface ExtensionUtils {
     openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
     openDataTablePopup: (props: OpenDataTablePopupProps) => void;
     emitEvent: (eventName: string, input: any) => Promise<any>;
+    /**
+     * Shorthand for the standalone `isHidden(ctx, id)` helper — returns
+     * true when the project has opted to hide the UI element registered
+     * under the given identifier in its `ui.hide` config.
+     */
+    isHidden: (id: string) => boolean;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;

package/dist/extensions/extensionUtils.js

@@ -60,6 +60,7 @@ export function getExtensionUtils(lobb, ctx) {
         openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
         openDataTablePopup: (props) => openDataTablePopup({ lobb, ctx }, props),
         emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
+        isHidden: (id) => ctx.meta?.ui?.hide?.[id] === true,
         components: getComponents(),
         mediaQueries: mediaQueries,
         intlDate: intlDate,

package/dist/index.d.ts

@@ -26,3 +26,4 @@ export { default as DataTable } from "./components/dataTable/dataTable.svelte";
 export { default as Drawer } from "./components/drawer.svelte";
 export { default as SelectRecord } from "./components/selectRecord.svelte";
 export { Switch } from "./components/ui/switch";
+export { isHidden } from "./utils";

package/dist/index.js

@@ -25,3 +25,4 @@ export { default as DataTable } from "./components/dataTable/dataTable.svelte";
 export { default as Drawer } from "./components/drawer.svelte";
 export { default as SelectRecord } from "./components/selectRecord.svelte";
 export { Switch } from "./components/ui/switch";
+export { isHidden } from "./utils";

package/dist/store.types.d.ts

@@ -1,4 +1,6 @@
 import type { Extension } from "./extensions/extension.types";
+import type { UIConfig, UITheme } from "@lobb-js/core";
+export type { UITheme };
 export interface CollectionTab {
     id?: string;
     label: string;
@@ -30,16 +32,9 @@ interface Collection {
     };
 }
 type Collections = Record<string, Collection>;
-export interface UITheme {
-    light?: Record<string, string>;
-    dark?: Record<string, string>;
-}
 interface Meta {
     version: string;
-    ui?: {
-        theme?: UITheme;
-        horizontalNav?: boolean;
-    };
+    ui?: UIConfig;
     relations: Array<any>;
     collections: Collections;
     extensions: Record<string, any>;
@@ -54,4 +49,3 @@ export interface CTX {
     meta: Meta;
     currentUrl: URL;
 }
-export {};

package/dist/utils.d.ts

@@ -1,5 +1,6 @@
 import { type ClassValue } from "clsx";
 import { MediaQuery } from 'svelte/reactivity';
+import type { CTX } from "./store.types";
 export declare function cn(...inputs: ClassValue[]): string;
 export type WithoutChild<T> = T extends {
     child?: any;
@@ -19,6 +20,7 @@ export declare const mediaQueries: {
     '2xl': MediaQuery;
 };
 export declare function getFieldTypeLabel(type: string | undefined | null): string;
+export declare function isHidden(ctx: CTX | null | undefined, id: string): boolean;
 export declare function calculateDrawerWidth(): number;
 export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
 export declare function parseFunction(functionString: string): any;

package/dist/utils.js

@@ -24,6 +24,14 @@ export function getFieldTypeLabel(type) {
         return "";
     return FIELD_TYPE_LABELS[type] ?? type;
 }
+// Settings-based visibility check. Returns true when the project has
+// opted to hide the UI element registered under the given identifier
+// in its `ui.hide` config (e.g. "reports.dashboardShareButton").
+// Components that support hiding wrap their render with
+// `{#if !isHidden(ctx, "...")}`.
+export function isHidden(ctx, id) {
+    return ctx?.meta?.ui?.hide?.[id] === true;
+}
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
     const drawersCount = Array.from(backgroundDrawerButtons).length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,8 @@
     }
   },
   "scripts": {
-    "dev": "vite dev",
+    "dev": "bun run --watch lobb.ts",
+    "dev:studio": "vite dev",
     "build": "vite build && bun run package",
     "package": "svelte-kit sync && svelte-package --input src/lib",
     "preview": "vite preview",
@@ -36,14 +37,17 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:unit": "vitest",
     "test-storybook": "vitest --project=storybook",
     "prepublishOnly": "./scripts/prepublish.sh",
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.35.0",
+    "@lobb-js/core": "^0.37.0",
     "@chromatic-com/storybook": "^4.1.2",
+    "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -53,6 +57,7 @@
     "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
     "@tsconfig/svelte": "^5.0.6",
+    "@types/lodash-es": "^4.17.12",
     "@types/mustache": "^4.2.6",
     "@types/node": "^24.10.1",
     "@types/qs": "^6.9.18",
@@ -69,8 +74,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "vite": "^8.0.13",
-    "vitest": "^4.0.5",
-    "@types/lodash-es": "^4.17.12"
+    "vitest": "^4.0.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/src/lib/components/canAccess.svelte

@@ -14,7 +14,7 @@
 	import type { Snippet } from "svelte";
 	import { onMount } from "svelte";
 	import { getStudioContext } from "../context";
-	import { emitEvent } from "../eventSystem";
+	import { checkAuthAccess } from "../eventSystem";
 
 	interface Props {
 		collection: string;
@@ -31,17 +31,7 @@
 	let allowed = $state<boolean | null>(null);
 
 	onMount(async () => {
-		try {
-			const result = await emitEvent({ lobb, ctx }, "auth.canAccess", {
-				collection,
-				action,
-			});
-			allowed = result === true;
-		} catch {
-			// No handler registered (auth extension not loaded), or the
-			// handler threw — fail closed.
-			allowed = false;
-		}
+		allowed = await checkAuthAccess({ lobb, ctx }, collection, action);
 	});
 </script>
 

package/src/lib/components/dataTable/dataTable.svelte

@@ -165,6 +165,7 @@
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
+    let hasLoaded = $state(false);
     const columns: TableProps["columns"] = $state(
         getCollectionColumns(ctx, collectionName),
     );
@@ -197,6 +198,7 @@
         totalCount = res.meta.totalCount;
         onDataLoad?.(totalCount);
         loading = false;
+        hasLoaded = true;
     }
 
     async function handleDelete(entryId: string) {
@@ -297,6 +299,7 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
+            {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
@@ -310,7 +313,7 @@
     <div class="relative flex-1 overflow-auto w-full">
         {#key activeTabFilter}
             <div class="h-full w-full" in:fade={{ duration: 120 }}>
-                {#if loading}
+                {#if loading && !hasLoaded}
                     <div class="flex flex-col gap-2 p-2 w-full">
                         <Skeleton class="h-8 w-full" />
                         <Skeleton class="h-8 w-[80%]" />

package/src/lib/components/dataTable/header.svelte

@@ -3,7 +3,7 @@
     import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
-    import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
+    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
@@ -26,6 +26,7 @@
         onLink?: (record: any) => void;
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
+        loading?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -37,6 +38,7 @@
         onLink,
         onCreate,
         showImport = true,
+        loading = false,
         left
     }: Props = $props();
 
@@ -162,10 +164,15 @@
             variant="ghost"
             size="sm"
             class="text-muted-foreground"
-            Icon={ListRestart}
             onclick={() => (params = { ...params })}
         >
-            {headerIsSmall ? "" : "Refresh"}
+            {#if loading}
+                <LoaderCircle size={16} class="animate-spin" />
+                {headerIsSmall ? "" : "Loading"}
+            {:else}
+                <ListRestart size={16} />
+                {headerIsSmall ? "" : "Refresh"}
+            {/if}
         </Button>
         {#if showImport}
             <CanAccess collection={collectionName} action="create">

package/src/lib/components/detailView/create/createDetailViewChildren.svelte

@@ -95,8 +95,8 @@
                         showImport={false}
                         showHeader={true}
                         showFooter={false}
-                        showDelete={false}
-                        showEdit={false}
+                        showDelete={true}
+                        showEdit={true}
                         tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
                     >
                         {#snippet headerLeft()}

package/src/lib/components/importButton.svelte

@@ -86,7 +86,23 @@
 			});
 	}
 
-	function detectAndParse(content: string): any[] {
+	async function detectAndParse(content: string): Promise<any[]> {
+		// Give projects a chance to take over parsing for non-standard
+		// formats (preamble rows, multi-line cells, vendor exports, …) by
+		// registering a workflow on `studio.collections.import.parse`. The
+		// workflow receives the raw text and sets `handled: true` along
+		// with its own `rows`; if no workflow takes over, we fall through
+		// to the built-in JSON / simple-CSV detector.
+		const result = await emitEvent({ lobb, ctx }, "studio.collections.import.parse", {
+			collectionName,
+			content,
+			rows: null as any[] | null,
+			handled: false,
+		});
+		if (result?.handled && Array.isArray(result.rows)) {
+			return result.rows;
+		}
+
 		const trimmed = content.trim();
 		if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
 			const parsed = JSON.parse(trimmed);
@@ -98,7 +114,7 @@
 	async function processContent(content: string) {
 		parseError = "";
 		try {
-			const rows = detectAndParse(content);
+			const rows = await detectAndParse(content);
 			if (rows.length === 0) throw new Error("No data rows found");
 			transformedRows = applyColumnMapping(rows);
 			step = "preview";

package/src/lib/components/mainNavShared.ts

@@ -1,5 +1,5 @@
 import { House, Layers, Library, Workflow } from "lucide-svelte";
-import { emitEvent } from "../eventSystem";
+import { checkAuthAccess } from "../eventSystem";
 import { getDashboardNavs } from "../extensions/extensionUtils";
 
 export type NavItem = {
@@ -13,11 +13,7 @@ export type NavItem = {
 
 async function isItemVisible(lobb: any, ctx: any, item: NavItem): Promise<boolean> {
     if (!item.represents) return true;
-    const res = await emitEvent({ lobb, ctx }, "auth.canAccess", {
-        collection: item.represents,
-        action: "read",
-    });
-    return res === true;
+    return checkAuthAccess({ lobb, ctx }, item.represents, "read");
 }
 
 export async function buildNavSections(lobb: any, ctx: any): Promise<NavItem[][]> {

package/src/lib/components/routes/collections/collections.svelte

@@ -2,7 +2,7 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
-    import { emitEvent } from "../../../eventSystem";
+    import { checkAuthAccess } from "../../../eventSystem";
     import Collection from "./collection.svelte";
     import { onMount } from "svelte";
 
@@ -18,7 +18,7 @@
     let { collectionName } = $props();
 
     // Start empty so unreadable collections never flash. Populated after the
-    // auth.canAccess checks resolve below.
+    // Populated after checkAuthAccess calls resolve below.
     let collectionsList = $state<SideBarData>([]);
 
     onMount(async () => {
@@ -31,14 +31,9 @@
         );
         const visibleNames = (
             await Promise.all(
-                allNames.map(async (name) => {
-                    const res = await emitEvent(
-                        { lobb, ctx },
-                        "auth.canAccess",
-                        { collection: name, action: "read" },
-                    );
-                    return res === true ? name : null;
-                }),
+                allNames.map(async (name) =>
+                    (await checkAuthAccess({ lobb, ctx }, name, "read")) ? name : null
+                ),
             )
         ).filter((n): n is string => n !== null);
 

package/src/lib/eventSystem.ts

@@ -3,6 +3,15 @@ import type { StudioContext } from "./context";
 import { openCreateDetailView, openUpdateDetailView } from "./actions";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 
+export async function checkAuthAccess(studioContext: StudioContext, collection: string, action: string): Promise<boolean> {
+    try {
+        const result = await emitEvent(studioContext, "auth.canAccess", { collection, action });
+        return result !== false;
+    } catch {
+        return false;
+    }
+}
+
 export async function emitEvent(studioContext: StudioContext, eventName: string, input: any): Promise<any> {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter(

package/src/lib/extensions/extension.types.ts

@@ -73,6 +73,12 @@ export interface ExtensionUtils {
     openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
     openDataTablePopup: (props: OpenDataTablePopupProps) => void;
     emitEvent: (eventName: string, input: any) => Promise<any>;
+    /**
+     * Shorthand for the standalone `isHidden(ctx, id)` helper — returns
+     * true when the project has opted to hide the UI element registered
+     * under the given identifier in its `ui.hide` config.
+     */
+    isHidden: (id: string) => boolean;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;

package/src/lib/extensions/extensionUtils.ts

@@ -70,6 +70,7 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
     openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
     openDataTablePopup: (props) => openDataTablePopup({ lobb, ctx }, props),
     emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
+    isHidden: (id) => ctx.meta?.ui?.hide?.[id] === true,
     components: getComponents(),
     mediaQueries: mediaQueries,
     intlDate: intlDate,

package/src/lib/index.ts

@@ -26,4 +26,5 @@ export { default as RangeCalendarButton } from "./components/rangeCalendarButton
 export { default as DataTable } from "./components/dataTable/dataTable.svelte";
 export { default as Drawer } from "./components/drawer.svelte";
 export { default as SelectRecord } from "./components/selectRecord.svelte";
-export { Switch } from "./components/ui/switch";
+export { Switch } from "./components/ui/switch";
+export { isHidden } from "./utils";

package/src/lib/store.types.ts

@@ -1,4 +1,9 @@
 import type { Extension } from "./extensions/extension.types";
+import type { UIConfig, UITheme } from "@lobb-js/core";
+
+// Re-export so existing imports of UITheme from the studio package
+// keep working without touching every consumer.
+export type { UITheme };
 
 export interface CollectionTab {
     id?: string;
@@ -27,14 +32,9 @@ interface Collection {
 }
 type Collections = Record<string, Collection>;
 
-export interface UITheme {
-    light?: Record<string, string>;
-    dark?: Record<string, string>;
-}
-
 interface Meta {
     version: string;
-    ui?: { theme?: UITheme; horizontalNav?: boolean };
+    ui?: UIConfig;
     relations: Array<any>;
     collections: Collections;
     extensions: Record<string, any>;

package/src/lib/utils.ts

@@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { isEqual } from "lodash-es";
 
 import { MediaQuery } from 'svelte/reactivity';
+import type { CTX } from "./store.types";
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
@@ -36,6 +37,15 @@ export function getFieldTypeLabel(type: string | undefined | null): string {
     return FIELD_TYPE_LABELS[type] ?? type;
 }
 
+// Settings-based visibility check. Returns true when the project has
+// opted to hide the UI element registered under the given identifier
+// in its `ui.hide` config (e.g. "reports.dashboardShareButton").
+// Components that support hiding wrap their render with
+// `{#if !isHidden(ctx, "...")}`.
+export function isHidden(ctx: CTX | null | undefined, id: string): boolean {
+    return ctx?.meta?.ui?.hide?.[id] === true;
+}
+
 
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");

package/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import "../app.css";
+
+  let { children } = $props();
+</script>
+
+{@render children()}

package/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false;

package/src/routes/[...path]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { StudioRoot } from "$lib/index.js";
+</script>
+
+<StudioRoot />

package/src/routes/+page.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-  import { Studio } from '$lib/index.js';
-  import '../app.css';
-</script>
-
-<Studio />