@lobb-js/lobb-ext-reports 0.14.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/report.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { CanAccess } from "@lobb-js/studio";
+	import { CanAccess, isHidden } from "@lobb-js/studio";
 	import ReportBody from "../../../reportBody.svelte";
 
 	const { reportId, utils }: { reportId: string; utils: any } = $props();
@@ -99,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>
@@ -120,23 +120,25 @@
 					Expand window to rearrange
 				</div>
 			{/if}
-			<CanAccess collection="auth_shares" action="create">
-				<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>
-			</CanAccess>
+			{#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()}
 				>
@@ -150,7 +152,7 @@
 		<ReportBody
 			{reportId}
 			{utils}
-			allowEdit
+			bind:editable
 			onLayoutChange={handleLayoutChange}
 			onChartClick={handleChartClick}
 			onReportLoaded={handleReportLoaded}

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

@@ -131,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/report.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { CanAccess } from "@lobb-js/studio";
+	import { CanAccess, isHidden } from "@lobb-js/studio";
 	import ReportBody from "../../../reportBody.svelte";
 
 	const { reportId, utils }: { reportId: string; utils: any } = $props();
@@ -99,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>
@@ -120,23 +120,25 @@
 					Expand window to rearrange
 				</div>
 			{/if}
-			<CanAccess collection="auth_shares" action="create">
-				<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>
-			</CanAccess>
+			{#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()}
 				>
@@ -150,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

@@ -131,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.14.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.34.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.33.0",
+    "@lobb-js/studio": "^0.36.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.60.1",