@lobb-js/lobb-ext-reports 0.13.0 → 0.15.0

package/dist/lib/components/dv_fields_buttons/query_ai_button/index.svelte

@@ -8,7 +8,7 @@
 	const componentProps: any = {
 		title: "Generate the query with AI",
 		description: "Describe to the AI the query you want to generate",
-		class: "h-7 px-3 text-xs font-normal",
+		size: "sm",
 		variant: "outline",
 		// format: {
 		// 	type: 'json_object'

package/dist/lib/components/gridStack.svelte

@@ -9,16 +9,14 @@
 		column?: number;
 		cellHeight?: string;
 		editable?: boolean;
-		allowEdit?: boolean;
 		onLayoutChange?: (layout: LayoutItem[]) => void;
 		children: Snippet;
 	}
 
 	let {
 		column = 12,
-		cellHeight = "150px",
+		cellHeight = "50px",
 		editable = $bindable(false),
-		allowEdit = false,
 		onLayoutChange,
 		children,
 	}: Props = $props();
@@ -31,18 +29,16 @@
 	let containerWidth = $state(0);
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	// Edit mode only ever turns on when the parent explicitly opts in.
-	// Without allowEdit, container width is irrelevant — the grid stays
-	// disabled forever.
-	let editMode = $derived(allowEdit && containerWidth >= 1200);
-
-	// Keep editable in sync so parent can read it
-	$effect(() => { editable = editMode; });
+	// Editability is decided by the gridStack itself, not the parent.
+	// The signal that a parent cares about edits is `onLayoutChange` —
+	// no callback means view-only, even on a wide screen. Width gates
+	// the rest: drag handles aren't usable on a tiny grid.
+	$effect(() => {
+		editable = !!onLayoutChange && containerWidth >= 768;
+	});
 
 	function getResponsiveColumns(width: number): number {
-		if (width >= 1200) return 12;
-		if (width >= 768) return 6;
-		if (width >= 480) return 2;
+		if (width >= 768) return 12;
 		return 1;
 	}
 
@@ -63,7 +59,7 @@
 	}
 
 	$effect(() => {
-		const mode = editMode;    // force-read so always tracked
+		const mode = editable;     // force-read so always tracked
 		const ready = initialized; // force-read so always tracked
 		if (!grid || !ready) return;
 		if (mode) {
@@ -101,7 +97,7 @@
 			window.dispatchEvent(new Event("resize"));
 			lastWidth = entries[0]?.contentRect.width ?? gridEl!.offsetWidth;
 			containerWidth = lastWidth;
-			if (!editMode) {
+			if (!editable) {
 				grid?.column(getResponsiveColumns(lastWidth));
 			}
 		});
@@ -132,6 +128,7 @@
 	.grid-stack-wrap {
 		overflow-x: hidden;
 		width: 100%;
+		height: 100%;
 	}
 
 	:global(.grid-stack) {

package/dist/lib/components/pages/reports/components/chart.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import type { ExtensionProps } from "@lobb-js/studio";
+	import { CanAccess } from "@lobb-js/studio";
 	import Table from "./charts/table.svelte";
 	import ChartJs from "./charts/chartJs.svelte";
 	import Metric from "./charts/metric.svelte";
@@ -33,27 +33,6 @@
 	const { UpdateDetailViewButton, Button, Tooltip } = utils.components;
 	const icons = utils.components.Icons;
 
-	// Button visibility comes from the caller's actual permissions on
-	// reports_charts. A logged-in admin sees edit + delete; a viewer without
-	// those grants (including a share-token recipient) doesn't see either.
-	let canUpdate = $state(false);
-	let canDelete = $state(false);
-
-	onMount(async () => {
-		const [updateAllowed, deleteAllowed] = await Promise.all([
-			utils.emitEvent("auth.canAccess", {
-				collection: "reports_charts",
-				action: "update",
-			}),
-			utils.emitEvent("auth.canAccess", {
-				collection: "reports_charts",
-				action: "delete",
-			}),
-		]);
-		canUpdate = updateAllowed === true;
-		canDelete = deleteAllowed === true;
-	});
-
 	function findCustomChartComponent(type: string): any {
 		const extensions = utils.ctx?.extensions ?? {};
 		for (const ext of Object.values(extensions) as any[]) {
@@ -116,7 +95,7 @@
 				{/if}
 			</div>
 			<div class="flex">
-				{#if canUpdate}
+				<CanAccess collection="reports_charts" action="update">
 					<UpdateDetailViewButton
 						collectionName="reports_charts"
 						recordId={chartRecord.id}
@@ -125,8 +104,8 @@
 						Icon={icons.Pencil}
 						onSuccessfullSave={handleEditOnSuccessfull}
 					></UpdateDetailViewButton>
-				{/if}
-				{#if canDelete}
+				</CanAccess>
+				<CanAccess collection="reports_charts" action="delete">
 					<Button
 						class="h-6 w-6 text-muted-foreground hover:bg-transparent"
 						variant="ghost"
@@ -134,7 +113,7 @@
 						Icon={icons.Trash}
 						onclick={handleChartDelete}
 					></Button>
-				{/if}
+				</CanAccess>
 			</div>
 		</div>
 	{/if}

package/dist/lib/components/pages/reports/components/report.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { CanAccess, isHidden } from "@lobb-js/studio";
 	import ReportBody from "../../../reportBody.svelte";
 
 	const { reportId, utils }: { reportId: string; utils: any } = $props();
@@ -13,7 +13,6 @@
 	let report: any = $state(null);
 	let saving = $state(false);
 	let editable = $state(false);
-	let canShare = $state(false);
 	let sharing = $state(false);
 	// Handle captured from ReportBody via its onReady callback — lets us
 	// trigger a reload of charts after creating a new one without duplicating
@@ -49,14 +48,6 @@
 		});
 	}
 
-	async function checkSharePermission() {
-		const allowed = await utils.emitEvent("auth.canAccess", {
-			collection: "auth_shares",
-			action: "create",
-		});
-		canShare = allowed === true;
-	}
-
 	async function handleShare() {
 		sharing = true;
 		try {
@@ -101,9 +92,6 @@
 		}
 	}
 
-	onMount(() => {
-		checkSharePermission();
-	});
 </script>
 
 <div class="report-layout">
@@ -111,7 +99,7 @@
 		<div class="flex gap-2">
 			<div class="mt-1"><SidebarTrigger /></div>
 			<div class="flex flex-col justify-center">
-				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<h2 class="font-medium text-foreground">{report?.name ?? ""}</h2>
 				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 		</div>
@@ -132,23 +120,25 @@
 					Expand window to rearrange
 				</div>
 			{/if}
-			{#if canShare}
-				<Button
-					variant="outline"
-					class="h-7 px-3 text-xs font-normal"
-					Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
-					disabled={sharing}
-					onclick={handleShare}
-				>
-					{sharing ? "Sharing..." : "Share"}
-				</Button>
+			{#if !isHidden(utils.ctx, "reports.dashboardShareButton")}
+				<CanAccess collection="auth_shares" action="create">
+					<Button
+						variant="outline"
+						size="sm"
+						Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
+						disabled={sharing}
+						onclick={handleShare}
+					>
+						{sharing ? "Sharing..." : "Share"}
+					</Button>
+				</CanAccess>
 			{/if}
 			{#if report}
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: reportId, name: report.name } }}
 					variant="default"
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={Icons.Plus}
 					onSuccessfullSave={async () => await body?.reload()}
 				>
@@ -162,7 +152,7 @@
 		<ReportBody
 			{reportId}
 			{utils}
-			allowEdit
+			bind:editable
 			onLayoutChange={handleLayoutChange}
 			onChartClick={handleChartClick}
 			onReportLoaded={handleReportLoaded}

package/dist/lib/components/pages/reports/index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ExtensionProps } from "@lobb-js/studio";
+	import { ExtensionsComponents } from "@lobb-js/studio";
 	import Report from "./components/report.svelte";
 
 	const { utils, ...props }: ExtensionProps = $props();
@@ -58,7 +59,7 @@
 
 <Sidebar title="Dashboards" data={sideBarData}>
 	{#snippet belowSearch()}
-		<div class="p-2">
+		<div class="flex flex-col gap-2 p-2">
 			<CreateDetailViewButton
 				collectionName="reports_dashboards"
 				variant="outline"
@@ -71,6 +72,16 @@
 			>
 				Create a report
 			</CreateDetailViewButton>
+			<!-- Extension hook: apps can register components for
+					`reports.sidebar.actions` to drop actions into the
+					dashboards sidebar (below Create). The `url` prop is
+					forwarded so the consumer's `when` predicate can
+					scope by route. -->
+			<ExtensionsComponents
+				name="reports.sidebar.actions"
+				{utils}
+				url={utils.page.url}
+			/>
 		</div>
 	{/snippet}
 	{#snippet elementRightSide(item: any)}
@@ -120,7 +131,7 @@
 				<CreateDetailViewButton
 					collectionName="reports_dashboards"
 					variant="default"
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={icons.Plus}
 					onSuccessfullSave={async (record: any) =>
 						utils.goto(`?report=${record.id}`)}

package/dist/lib/components/pages/shared_report/index.svelte

@@ -75,7 +75,7 @@
 	{:else}
 		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
 			<div class="flex flex-col justify-center">
-				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<h2 class="font-medium text-foreground">{report?.name ?? ""}</h2>
 				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 			<div class="text-xs text-muted-foreground">Shared view</div>

package/dist/lib/components/reportBody.svelte

@@ -7,7 +7,6 @@
 	interface Props extends ExtensionProps {
 		reportId: string | number;
 		editable?: boolean;
-		allowEdit?: boolean;
 		showChartHeaders?: boolean;
 		onLayoutChange?: (changes: any[]) => void;
 		onChartClick?: (event: any, elements: any[], chart: any) => void;
@@ -15,10 +14,9 @@
 		onReady?: (api: { reload: () => Promise<void> }) => void;
 	}
 
-	const {
+	let {
 		reportId,
-		editable = false,
-		allowEdit = false,
+		editable = $bindable(false),
 		showChartHeaders = true,
 		onLayoutChange,
 		onChartClick,
@@ -95,7 +93,7 @@
 	</div>
 {:else}
 	{#key charts}
-		<GridStackComponent {editable} {allowEdit} {onLayoutChange}>
+		<GridStackComponent bind:editable {onLayoutChange}>
 			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
 				<div
 					class="grid-stack-item"

package/extensions/reports/studio/lib/components/dv_fields_buttons/query_ai_button/index.svelte

@@ -8,7 +8,7 @@
 	const componentProps: any = {
 		title: "Generate the query with AI",
 		description: "Describe to the AI the query you want to generate",
-		class: "h-7 px-3 text-xs font-normal",
+		size: "sm",
 		variant: "outline",
 		// format: {
 		// 	type: 'json_object'

package/extensions/reports/studio/lib/components/gridStack.svelte

@@ -9,16 +9,14 @@
 		column?: number;
 		cellHeight?: string;
 		editable?: boolean;
-		allowEdit?: boolean;
 		onLayoutChange?: (layout: LayoutItem[]) => void;
 		children: Snippet;
 	}
 
 	let {
 		column = 12,
-		cellHeight = "150px",
+		cellHeight = "50px",
 		editable = $bindable(false),
-		allowEdit = false,
 		onLayoutChange,
 		children,
 	}: Props = $props();
@@ -31,18 +29,16 @@
 	let containerWidth = $state(0);
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	// Edit mode only ever turns on when the parent explicitly opts in.
-	// Without allowEdit, container width is irrelevant — the grid stays
-	// disabled forever.
-	let editMode = $derived(allowEdit && containerWidth >= 1200);
-
-	// Keep editable in sync so parent can read it
-	$effect(() => { editable = editMode; });
+	// Editability is decided by the gridStack itself, not the parent.
+	// The signal that a parent cares about edits is `onLayoutChange` —
+	// no callback means view-only, even on a wide screen. Width gates
+	// the rest: drag handles aren't usable on a tiny grid.
+	$effect(() => {
+		editable = !!onLayoutChange && containerWidth >= 768;
+	});
 
 	function getResponsiveColumns(width: number): number {
-		if (width >= 1200) return 12;
-		if (width >= 768) return 6;
-		if (width >= 480) return 2;
+		if (width >= 768) return 12;
 		return 1;
 	}
 
@@ -63,7 +59,7 @@
 	}
 
 	$effect(() => {
-		const mode = editMode;    // force-read so always tracked
+		const mode = editable;     // force-read so always tracked
 		const ready = initialized; // force-read so always tracked
 		if (!grid || !ready) return;
 		if (mode) {
@@ -101,7 +97,7 @@
 			window.dispatchEvent(new Event("resize"));
 			lastWidth = entries[0]?.contentRect.width ?? gridEl!.offsetWidth;
 			containerWidth = lastWidth;
-			if (!editMode) {
+			if (!editable) {
 				grid?.column(getResponsiveColumns(lastWidth));
 			}
 		});
@@ -132,6 +128,7 @@
 	.grid-stack-wrap {
 		overflow-x: hidden;
 		width: 100%;
+		height: 100%;
 	}
 
 	:global(.grid-stack) {

package/extensions/reports/studio/lib/components/pages/reports/components/chart.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import type { ExtensionProps } from "@lobb-js/studio";
+	import { CanAccess } from "@lobb-js/studio";
 	import Table from "./charts/table.svelte";
 	import ChartJs from "./charts/chartJs.svelte";
 	import Metric from "./charts/metric.svelte";
@@ -33,27 +33,6 @@
 	const { UpdateDetailViewButton, Button, Tooltip } = utils.components;
 	const icons = utils.components.Icons;
 
-	// Button visibility comes from the caller's actual permissions on
-	// reports_charts. A logged-in admin sees edit + delete; a viewer without
-	// those grants (including a share-token recipient) doesn't see either.
-	let canUpdate = $state(false);
-	let canDelete = $state(false);
-
-	onMount(async () => {
-		const [updateAllowed, deleteAllowed] = await Promise.all([
-			utils.emitEvent("auth.canAccess", {
-				collection: "reports_charts",
-				action: "update",
-			}),
-			utils.emitEvent("auth.canAccess", {
-				collection: "reports_charts",
-				action: "delete",
-			}),
-		]);
-		canUpdate = updateAllowed === true;
-		canDelete = deleteAllowed === true;
-	});
-
 	function findCustomChartComponent(type: string): any {
 		const extensions = utils.ctx?.extensions ?? {};
 		for (const ext of Object.values(extensions) as any[]) {
@@ -116,7 +95,7 @@
 				{/if}
 			</div>
 			<div class="flex">
-				{#if canUpdate}
+				<CanAccess collection="reports_charts" action="update">
 					<UpdateDetailViewButton
 						collectionName="reports_charts"
 						recordId={chartRecord.id}
@@ -125,8 +104,8 @@
 						Icon={icons.Pencil}
 						onSuccessfullSave={handleEditOnSuccessfull}
 					></UpdateDetailViewButton>
-				{/if}
-				{#if canDelete}
+				</CanAccess>
+				<CanAccess collection="reports_charts" action="delete">
 					<Button
 						class="h-6 w-6 text-muted-foreground hover:bg-transparent"
 						variant="ghost"
@@ -134,7 +113,7 @@
 						Icon={icons.Trash}
 						onclick={handleChartDelete}
 					></Button>
-				{/if}
+				</CanAccess>
 			</div>
 		</div>
 	{/if}

package/extensions/reports/studio/lib/components/pages/reports/components/report.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { CanAccess, isHidden } from "@lobb-js/studio";
 	import ReportBody from "../../../reportBody.svelte";
 
 	const { reportId, utils }: { reportId: string; utils: any } = $props();
@@ -13,7 +13,6 @@
 	let report: any = $state(null);
 	let saving = $state(false);
 	let editable = $state(false);
-	let canShare = $state(false);
 	let sharing = $state(false);
 	// Handle captured from ReportBody via its onReady callback — lets us
 	// trigger a reload of charts after creating a new one without duplicating
@@ -49,14 +48,6 @@
 		});
 	}
 
-	async function checkSharePermission() {
-		const allowed = await utils.emitEvent("auth.canAccess", {
-			collection: "auth_shares",
-			action: "create",
-		});
-		canShare = allowed === true;
-	}
-
 	async function handleShare() {
 		sharing = true;
 		try {
@@ -101,9 +92,6 @@
 		}
 	}
 
-	onMount(() => {
-		checkSharePermission();
-	});
 </script>
 
 <div class="report-layout">
@@ -111,7 +99,7 @@
 		<div class="flex gap-2">
 			<div class="mt-1"><SidebarTrigger /></div>
 			<div class="flex flex-col justify-center">
-				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<h2 class="font-medium text-foreground">{report?.name ?? ""}</h2>
 				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 		</div>
@@ -132,23 +120,25 @@
 					Expand window to rearrange
 				</div>
 			{/if}
-			{#if canShare}
-				<Button
-					variant="outline"
-					class="h-7 px-3 text-xs font-normal"
-					Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
-					disabled={sharing}
-					onclick={handleShare}
-				>
-					{sharing ? "Sharing..." : "Share"}
-				</Button>
+			{#if !isHidden(utils.ctx, "reports.dashboardShareButton")}
+				<CanAccess collection="auth_shares" action="create">
+					<Button
+						variant="outline"
+						size="sm"
+						Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
+						disabled={sharing}
+						onclick={handleShare}
+					>
+						{sharing ? "Sharing..." : "Share"}
+					</Button>
+				</CanAccess>
 			{/if}
 			{#if report}
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: reportId, name: report.name } }}
 					variant="default"
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={Icons.Plus}
 					onSuccessfullSave={async () => await body?.reload()}
 				>
@@ -162,7 +152,7 @@
 		<ReportBody
 			{reportId}
 			{utils}
-			allowEdit
+			bind:editable
 			onLayoutChange={handleLayoutChange}
 			onChartClick={handleChartClick}
 			onReportLoaded={handleReportLoaded}

package/extensions/reports/studio/lib/components/pages/reports/index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ExtensionProps } from "@lobb-js/studio";
+	import { ExtensionsComponents } from "@lobb-js/studio";
 	import Report from "./components/report.svelte";
 
 	const { utils, ...props }: ExtensionProps = $props();
@@ -58,7 +59,7 @@
 
 <Sidebar title="Dashboards" data={sideBarData}>
 	{#snippet belowSearch()}
-		<div class="p-2">
+		<div class="flex flex-col gap-2 p-2">
 			<CreateDetailViewButton
 				collectionName="reports_dashboards"
 				variant="outline"
@@ -71,6 +72,16 @@
 			>
 				Create a report
 			</CreateDetailViewButton>
+			<!-- Extension hook: apps can register components for
+					`reports.sidebar.actions` to drop actions into the
+					dashboards sidebar (below Create). The `url` prop is
+					forwarded so the consumer's `when` predicate can
+					scope by route. -->
+			<ExtensionsComponents
+				name="reports.sidebar.actions"
+				{utils}
+				url={utils.page.url}
+			/>
 		</div>
 	{/snippet}
 	{#snippet elementRightSide(item: any)}
@@ -120,7 +131,7 @@
 				<CreateDetailViewButton
 					collectionName="reports_dashboards"
 					variant="default"
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={icons.Plus}
 					onSuccessfullSave={async (record: any) =>
 						utils.goto(`?report=${record.id}`)}

package/extensions/reports/studio/lib/components/pages/shared_report/index.svelte

@@ -75,7 +75,7 @@
 	{:else}
 		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
 			<div class="flex flex-col justify-center">
-				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<h2 class="font-medium text-foreground">{report?.name ?? ""}</h2>
 				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 			<div class="text-xs text-muted-foreground">Shared view</div>

package/extensions/reports/studio/lib/components/reportBody.svelte

@@ -7,7 +7,6 @@
 	interface Props extends ExtensionProps {
 		reportId: string | number;
 		editable?: boolean;
-		allowEdit?: boolean;
 		showChartHeaders?: boolean;
 		onLayoutChange?: (changes: any[]) => void;
 		onChartClick?: (event: any, elements: any[], chart: any) => void;
@@ -15,10 +14,9 @@
 		onReady?: (api: { reload: () => Promise<void> }) => void;
 	}
 
-	const {
+	let {
 		reportId,
-		editable = false,
-		allowEdit = false,
+		editable = $bindable(false),
 		showChartHeaders = true,
 		onLayoutChange,
 		onChartClick,
@@ -95,7 +93,7 @@
 	</div>
 {:else}
 	{#key charts}
-		<GridStackComponent {editable} {allowEdit} {onLayoutChange}>
+		<GridStackComponent bind:editable {onLayoutChange}>
 			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
 				<div
 					class="grid-stack-item"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "license": "UNLICENSED",
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,7 @@
     "package": "svelte-package --input extensions/reports/studio"
   },
   "dependencies": {
-    "@lobb-js/core": "^0.33.0",
+    "@lobb-js/core": "^0.36.0",
     "chart.js": "^4.4.8",
     "gridstack": "^12.6.0",
     "hono": "^4.7.0",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
-    "@lobb-js/studio": "^0.32.0",
+    "@lobb-js/studio": "^0.36.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.60.1",