From b4f7125229a1a580ce281c7c2c8a72b2a8fcd402 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Fri, 30 Jan 2026 19:19:46 +0530
Subject: [PATCH 1/5] init canvas public URL

---
 .../navigation/TopNavigationBar.svelte        |  18 +-
 .../src/features/navigation/nav-utils.ts      |   6 +-
 .../public-urls/CanvasFiltersSection.svelte   | 108 +++++++++
 .../public-urls/CreatePublicURLForm.svelte    | 208 +++++++-----------
 .../public-urls/ExploreFiltersSection.svelte  |  92 ++++++++
 .../features/public-urls/canvas-form-utils.ts |  54 +++++
 .../[project]/-/share/[token]/+page.ts        |  34 ++-
 .../[token]/canvas/[dashboard]/+page.svelte   |  49 +++++
 8 files changed, 432 insertions(+), 137 deletions(-)
 create mode 100644 web-admin/src/features/public-urls/CanvasFiltersSection.svelte
 create mode 100644 web-admin/src/features/public-urls/ExploreFiltersSection.svelte
 create mode 100644 web-admin/src/features/public-urls/canvas-form-utils.ts
 create mode 100644 web-admin/src/routes/[organization]/[project]/-/share/[token]/canvas/[dashboard]/+page.svelte

diff --git a/web-admin/src/features/navigation/TopNavigationBar.svelte b/web-admin/src/features/navigation/TopNavigationBar.svelte
index 2ad06decdcc..5f4c926c75e 100644
--- a/web-admin/src/features/navigation/TopNavigationBar.svelte
+++ b/web-admin/src/features/navigation/TopNavigationBar.svelte
@@ -7,6 +7,7 @@
   import Rill from "@rilldata/web-common/components/icons/Rill.svelte";
   import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
   import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/types";
+  import { useCanvas } from "@rilldata/web-common/features/canvas/selector";
   import ChatToggle from "@rilldata/web-common/features/chat/layouts/sidebar/ChatToggle.svelte";
   import GlobalDimensionSearch from "@rilldata/web-common/features/dashboards/dimension-search/GlobalDimensionSearch.svelte";
   import StateManagersProvider from "@rilldata/web-common/features/dashboards/state-managers/StateManagersProvider.svelte";
@@ -196,9 +197,18 @@
   $: isDashboardValid = !!exploreSpec;
   $: hasUserAccess = $user.isSuccess && $user.data.user && !onPublicURLPage;
 
-  $: publicURLDashboardTitle =
-    $exploreQuery.data?.explore?.explore?.state?.validSpec?.displayName ||
-    dashboard;
+  $: canvasQuery = useCanvas(instanceId, dashboard, {
+    enabled:
+      !!instanceId &&
+      !!dashboard &&
+      !!onCanvasDashboardPage &&
+      !!onPublicURLPage,
+  });
+
+  $: publicURLDashboardTitle = onCanvasDashboardPage
+    ? $canvasQuery.data?.canvas?.displayName || dashboard
+    : $exploreQuery.data?.explore?.explore?.state?.validSpec?.displayName ||
+      dashboard;
 
   $: currentPath = [organization, project, dashboard, report || alert];
 </script>
@@ -273,7 +283,7 @@
 
     {#if onCanvasDashboardPage && hasUserAccess}
       <CanvasBookmarks {organization} {project} canvasName={dashboard} />
-      <ShareDashboardPopover createMagicAuthTokens={false} />
+      <ShareDashboardPopover {createMagicAuthTokens} />
     {/if}
     {#if $user.isSuccess}
       {#if $user.data && $user.data.user}
diff --git a/web-admin/src/features/navigation/nav-utils.ts b/web-admin/src/features/navigation/nav-utils.ts
index 52f283f4472..42e0db4d0fb 100644
--- a/web-admin/src/features/navigation/nav-utils.ts
+++ b/web-admin/src/features/navigation/nav-utils.ts
@@ -38,7 +38,11 @@ export function isMetricsExplorerPage(page: Page): boolean {
 }
 
 export function isCanvasDashboardPage(page: Page): boolean {
-  return page.route.id === "/[organization]/[project]/canvas/[dashboard]";
+  return (
+    page.route.id === "/[organization]/[project]/canvas/[dashboard]" ||
+    page.route.id ===
+      "/[organization]/[project]/-/share/[token]/canvas/[dashboard]"
+  );
 }
 
 /**
diff --git a/web-admin/src/features/public-urls/CanvasFiltersSection.svelte b/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
new file mode 100644
index 00000000000..1a1b4bf403b
--- /dev/null
+++ b/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { AdminServiceIssueMagicAuthTokenBody } from "@rilldata/web-admin/client";
+  import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import type { CanvasEntity } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
+  import type {
+    FilterManager,
+    UIFilters,
+  } from "@rilldata/web-common/features/canvas/stores/filter-manager";
+  import CanvasFilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/CanvasFilterChipsReadOnly.svelte";
+  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import { derived, type Readable } from "svelte/store";
+  import {
+    getCanvasFilters,
+    getCanvasStateUrl,
+    hasCanvasFilters,
+  } from "./canvas-form-utils";
+
+  export let dashboard: string;
+  export let instanceId: string;
+  export let onFilterStateChange: (hasFilters: boolean) => void;
+  export let onProvideFilters: (
+    provider: () => Partial<AdminServiceIssueMagicAuthTokenBody>,
+  ) => void;
+  let canvasEntity: CanvasEntity | undefined;
+  let canvasFilterManager: FilterManager | undefined;
+  let canvasActiveUIFiltersStore: Readable<UIFilters> | undefined;
+  let canvasAppliedFiltersStore: Readable<UIFilters> | undefined;
+
+  try {
+    const canvasStore = getCanvasStore(dashboard, instanceId);
+    canvasEntity = canvasStore.canvasEntity;
+    canvasFilterManager = canvasEntity.filterManager;
+    canvasActiveUIFiltersStore = canvasFilterManager.activeUIFiltersStore;
+
+    // Create a derived store that only includes filters with actual values (not just pinned ones)
+    canvasAppliedFiltersStore = derived(
+      canvasActiveUIFiltersStore,
+      ($activeFilters) => {
+        const appliedDimensionFilters = new Map();
+        const appliedMeasureFilters = new Map();
+
+        // Filter dimension filters that have selected values or input text
+        $activeFilters.dimensionFilters.forEach((filter, key) => {
+          const hasValues =
+            (filter.selectedValues && filter.selectedValues.length > 0) ||
+            (filter.inputText && filter.inputText.trim() !== "");
+          if (hasValues) {
+            appliedDimensionFilters.set(key, filter);
+          }
+        });
+
+        // Filter measure filters that have a filter expression
+        $activeFilters.measureFilters.forEach((filter, key) => {
+          if (filter.filter) {
+            appliedMeasureFilters.set(key, filter);
+          }
+        });
+
+        return {
+          dimensionFilters: appliedDimensionFilters,
+          measureFilters: appliedMeasureFilters,
+          complexFilters: $activeFilters.complexFilters,
+          hasFilters:
+            appliedDimensionFilters.size > 0 ||
+            appliedMeasureFilters.size > 0 ||
+            $activeFilters.complexFilters.length > 0,
+          hasClearableFilters:
+            appliedDimensionFilters.size > 0 || appliedMeasureFilters.size > 0,
+        } as UIFilters;
+      },
+    );
+  } catch (e) {
+    console.error("Failed to get canvas store:", e);
+  }
+
+  $: canvasFilters = canvasEntity ? getCanvasFilters(canvasEntity) : undefined;
+  $: canvasStateUrl = getCanvasStateUrl(new URL(window.location.href));
+  $: hasSomeFilter = canvasEntity ? hasCanvasFilters(canvasEntity) : false;
+
+  // Notify parent of filter state changes
+  $: onFilterStateChange(hasSomeFilter);
+
+  // Provide filter data to parent
+  $: onProvideFilters(() => ({
+    resourceType: ResourceKind.Canvas as string,
+    metricsViewFilters: canvasFilters,
+    fields: undefined, // Grant full access to all fields
+    state: canvasStateUrl || undefined,
+  }));
+</script>
+
+{#if hasSomeFilter}
+  <hr class="mt-4 mb-4" />
+
+  <div class="flex flex-col gap-y-1">
+    <p class="text-xs text-fg-primary font-normal">
+      The following filters will be locked and hidden:
+    </p>
+    {#if canvasAppliedFiltersStore}
+      <div class="flex flex-col gap-2 my-2">
+        <CanvasFilterChipsReadOnly
+          uiFilters={$canvasAppliedFiltersStore}
+          col={false}
+        />
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/web-admin/src/features/public-urls/CreatePublicURLForm.svelte b/web-admin/src/features/public-urls/CreatePublicURLForm.svelte
index eb3633a9783..ed780e894d8 100644
--- a/web-admin/src/features/public-urls/CreatePublicURLForm.svelte
+++ b/web-admin/src/features/public-urls/CreatePublicURLForm.svelte
@@ -3,7 +3,9 @@
   import {
     createAdminServiceIssueMagicAuthToken,
     getAdminServiceListMagicAuthTokensQueryKey,
+    type AdminServiceIssueMagicAuthTokenBody,
   } from "@rilldata/web-admin/client";
+  import { isCanvasDashboardPage } from "@rilldata/web-admin/features/navigation/nav-utils";
   import { Button, IconButton } from "@rilldata/web-common/components/button";
   import Calendar from "@rilldata/web-common/components/date-picker/Calendar.svelte";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
@@ -15,69 +17,49 @@
     PopoverContent,
     PopoverTrigger,
   } from "@rilldata/web-common/components/popover";
-  import ExploreFilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/ExploreFilterChipsReadOnly.svelte";
-  import { mergeDimensionAndMeasureFilters } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils.ts";
-  import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
-  import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
-  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
   import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useQueryClient } from "@tanstack/svelte-query";
   import { Pencil } from "lucide-svelte";
   import { DateTime } from "luxon";
   import { defaults, superForm } from "sveltekit-superforms";
   import { yup } from "sveltekit-superforms/adapters";
   import { object, string } from "yup";
-  import {
-    convertDateToMinutes,
-    getExploreFields,
-    getSanitizedExploreStateParam,
-    hasDashboardDimensionThresholdFilter,
-    hasDashboardWhereFilter,
-  } from "./form-utils";
+  import CanvasFiltersSection from "./CanvasFiltersSection.svelte";
+  import ExploreFiltersSection from "./ExploreFiltersSection.svelte";
+  import { convertDateToMinutes } from "./form-utils";
 
   const queryClient = useQueryClient();
-  const StateManagers = getStateManagers();
-
-  const {
-    dashboardStore,
-    metricsViewName,
-    selectors: {
-      measures: { visibleMeasures },
-      dimensions: { visibleDimensions },
-    },
-    validSpecStore,
-  } = StateManagers;
 
   $: ({ organization, project, dashboard } = $page.params);
-
-  const timeControlStore = useTimeControlStore(StateManagers);
+  $: ({ instanceId } = $runtime);
+  $: isCanvas = isCanvasDashboardPage($page);
 
   $: isTitleEmpty = $form.title.trim() === "";
 
-  $: exploreFields = getExploreFields(
-    $dashboardStore,
-    $visibleDimensions,
-    $visibleMeasures,
-  );
-
-  $: sanitizedState = getSanitizedExploreStateParam(
-    $dashboardStore,
-    exploreFields,
-    $validSpecStore.data?.explore,
-  );
-
-  $: hasWhereFilter = hasDashboardWhereFilter($dashboardStore);
-  $: hasDimensionThresholdFilter =
-    hasDashboardDimensionThresholdFilter($dashboardStore);
-  $: hasSomeFilter = hasWhereFilter || hasDimensionThresholdFilter;
-
   let url: string | null = null;
   let setExpiration = false;
   let apiError: string;
   let popoverOpen = false;
   let copied = false;
 
+  // These will be set by the child components via callbacks
+  let hasSomeFilter = false;
+  let dashboardDataProvider:
+    | (() => Partial<AdminServiceIssueMagicAuthTokenBody>)
+    | null = null;
+
+  function handleFilterStateChange(hasFilters: boolean) {
+    hasSomeFilter = hasFilters;
+  }
+
+  function handleProvideFilters(
+    provider: () => Partial<AdminServiceIssueMagicAuthTokenBody>,
+  ) {
+    dashboardDataProvider = provider;
+  }
+
   const formId = "create-public-url-form";
 
   const initialValues = {
@@ -101,29 +83,21 @@
         const values = form.data;
 
         try {
-          const filter = hasSomeFilter
-            ? mergeDimensionAndMeasureFilters(
-                $dashboardStore.whereFilter,
-                $dashboardStore.dimensionThresholdFilters,
-              )
-            : undefined;
-          // TODO : add a check upstream to make sure if filter exists, metricsViewName is defined
-          const metricsViewFilters = filter
-            ? { [$metricsViewName]: filter }
-            : undefined;
+          if (!dashboardDataProvider) {
+            throw new Error("Dashboard data provider not initialized");
+          }
+
+          const dashboardData = dashboardDataProvider();
 
           const { url: _url } = await $issueMagicAuthToken.mutateAsync({
             org: organization,
             project,
             data: {
-              resourceType: ResourceKind.Explore as string,
+              ...dashboardData,
               resourceName: dashboard,
-              metricsViewFilters,
-              fields: exploreFields,
               ttlMinutes: setExpiration
                 ? convertDateToMinutes(values.expiresAt).toString()
                 : undefined,
-              state: sanitizedState ? sanitizedState : undefined,
               displayName: values.title,
             },
           });
@@ -174,53 +148,52 @@
       Create a shareable public URL for this view.
     </h3>
 
-    {#if !url}
-      <div class="flex flex-col gap-y-1 mt-4">
-        <Input
-          id="name-input"
-          bind:value={$form.title}
-          placeholder="Label this URL"
-        />
-      </div>
+    <div class="flex flex-col gap-y-1 mt-4">
+      <Input
+        id="name-input"
+        bind:value={$form.title}
+        placeholder="Label this URL"
+      />
+    </div>
 
-      <div class="mt-4" class:mb-4={!hasSomeFilter}>
-        <div class="flex items-center gap-x-2">
-          <Switch small id="has-expiration" bind:checked={setExpiration} />
-          <Label class="text-xs" for="has-expiration">Set expiration</Label>
-        </div>
-        {#if setExpiration}
-          <div class="flex items-center gap-x-1 pl-[30px]">
-            <label for="expires-at" class="text-fg-secondary font-medium">
-              Access expires {new Date($form.expiresAt).toLocaleDateString(
-                "en-US",
-                { year: "numeric", month: "short", day: "numeric" },
-              )}
-            </label>
-            <Popover bind:open={popoverOpen}>
-              <PopoverTrigger>
-                <IconButton ariaLabel="Edit expiration date">
-                  <Pencil size="14px" class="text-primary-600" />
-                </IconButton>
-              </PopoverTrigger>
-              <PopoverContent align="end" class="p-0" strategy="fixed">
-                <Calendar
-                  selection={DateTime.fromISO($form.expiresAt)}
-                  singleDaySelection
-                  maxDate={maxExpirationDate}
-                  firstVisibleMonth={DateTime.fromISO($form.expiresAt)}
-                  onSelectDay={(date) => {
-                    $form.expiresAt = date.toISO();
-                    popoverOpen = false;
-                  }}
-                />
-              </PopoverContent>
-            </Popover>
-          </div>
-        {/if}
+    <div class="mt-4" class:mb-4={!hasSomeFilter}>
+      <div class="flex items-center gap-x-2">
+        <Switch small id="has-expiration" bind:checked={setExpiration} />
+        <Label class="text-xs" for="has-expiration">Set expiration</Label>
       </div>
+      {#if setExpiration}
+        <div class="flex items-center gap-x-1 pl-[30px]">
+          <label for="expires-at" class="text-fg-secondary font-medium">
+            Access expires {new Date($form.expiresAt).toLocaleDateString(
+              "en-US",
+              { year: "numeric", month: "short", day: "numeric" },
+            )}
+          </label>
+          <Popover bind:open={popoverOpen}>
+            <PopoverTrigger>
+              <IconButton ariaLabel="Edit expiration date">
+                <Pencil size="14px" class="text-primary-600" />
+              </IconButton>
+            </PopoverTrigger>
+            <PopoverContent align="end" class="p-0" strategy="fixed">
+              <Calendar
+                selection={DateTime.fromISO($form.expiresAt)}
+                singleDaySelection
+                maxDate={maxExpirationDate}
+                firstVisibleMonth={DateTime.fromISO($form.expiresAt)}
+                onSelectDay={(date) => {
+                  $form.expiresAt = date.toISO();
+                  popoverOpen = false;
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+      {/if}
+    </div>
 
-      <!-- TODO: revisit when time range lock is implemented -->
-      <!-- <div class="mt-4" class:mb-4={!hasWhereFilter}>
+    <!-- TODO: revisit when time range lock is implemented -->
+    <!-- <div class="mt-4" class:mb-4={!hasWhereFilter}>
       <div class="flex items-center gap-x-2">
         <Switch small id="lock-time-range" bind:checked={lockTimeRange} />
 
@@ -247,29 +220,18 @@
       {/if}
     </div> -->
 
-      {#if hasSomeFilter}
-        <hr class="mt-4 mb-4" />
-
-        <div class="flex flex-col gap-y-1">
-          <p class="text-xs text-fg-primary font-normal">
-            The following filters will be locked and hidden:
-          </p>
-          <div class="flex flex-row gap-1 mt-2">
-            <ExploreFilterChipsReadOnly
-              metricsViewNames={[$metricsViewName]}
-              filters={$dashboardStore.whereFilter}
-              dimensionsWithInlistFilter={$dashboardStore.dimensionsWithInlistFilter}
-              dimensionThresholdFilters={$dashboardStore.dimensionThresholdFilters}
-              queryTimeStart={$timeControlStore.timeStart}
-              queryTimeEnd={$timeControlStore.timeEnd}
-            />
-          </div>
-        </div>
-
-        <p class="text-xs text-fg-primary font-normal mt-4 mb-4">
-          Measures and dimensions will be limited to current visible set.
-        </p>
-      {/if}
+    {#if isCanvas && instanceId}
+      <CanvasFiltersSection
+        {dashboard}
+        {instanceId}
+        onFilterStateChange={handleFilterStateChange}
+        onProvideFilters={handleProvideFilters}
+      />
+    {:else}
+      <ExploreFiltersSection
+        onFilterStateChange={handleFilterStateChange}
+        onProvideFilters={handleProvideFilters}
+      />
     {/if}
 
     <Button
diff --git a/web-admin/src/features/public-urls/ExploreFiltersSection.svelte b/web-admin/src/features/public-urls/ExploreFiltersSection.svelte
new file mode 100644
index 00000000000..7d6f254df94
--- /dev/null
+++ b/web-admin/src/features/public-urls/ExploreFiltersSection.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { AdminServiceIssueMagicAuthTokenBody } from "@rilldata/web-admin/client";
+  import ExploreFilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/ExploreFilterChipsReadOnly.svelte";
+  import { mergeDimensionAndMeasureFilters } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils.ts";
+  import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
+  import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import {
+    getExploreFields,
+    getSanitizedExploreStateParam,
+    hasDashboardDimensionThresholdFilter,
+    hasDashboardWhereFilter,
+  } from "./form-utils";
+
+  export let onFilterStateChange: (hasFilters: boolean) => void;
+  export let onProvideFilters: (
+    provider: () => Partial<AdminServiceIssueMagicAuthTokenBody>,
+  ) => void;
+
+  const StateManagers = getStateManagers();
+  const dashboardStore = StateManagers.dashboardStore;
+  const metricsViewName = StateManagers.metricsViewName;
+  const visibleMeasures = StateManagers.selectors.measures.visibleMeasures;
+  const visibleDimensions =
+    StateManagers.selectors.dimensions.visibleDimensions;
+  const validSpecStore = StateManagers.validSpecStore;
+  const timeControlStore = useTimeControlStore(StateManagers);
+
+  $: exploreFields = getExploreFields(
+    $dashboardStore,
+    $visibleDimensions,
+    $visibleMeasures,
+  );
+
+  $: sanitizedState = getSanitizedExploreStateParam(
+    $dashboardStore,
+    exploreFields,
+    $validSpecStore.data?.explore,
+  );
+
+  $: hasWhereFilter = !!hasDashboardWhereFilter($dashboardStore);
+  $: hasDimensionThresholdFilter =
+    !!hasDashboardDimensionThresholdFilter($dashboardStore);
+  $: hasSomeFilter = hasWhereFilter || hasDimensionThresholdFilter;
+
+  // Notify parent of filter state changes
+  $: onFilterStateChange(hasSomeFilter);
+
+  // Provide filter data to parent
+  $: onProvideFilters(() => {
+    const filter = hasSomeFilter
+      ? mergeDimensionAndMeasureFilters(
+          $dashboardStore.whereFilter,
+          $dashboardStore.dimensionThresholdFilters,
+        )
+      : undefined;
+    const metricsViewFilters = filter
+      ? { [$metricsViewName]: filter }
+      : undefined;
+
+    return {
+      resourceType: ResourceKind.Explore as string,
+      metricsViewFilters,
+      fields: exploreFields,
+      state: sanitizedState ? sanitizedState : undefined,
+    };
+  });
+</script>
+
+{#if hasSomeFilter}
+  <hr class="mt-4 mb-4" />
+
+  <div class="flex flex-col gap-y-1">
+    <p class="text-xs text-fg-primary font-normal">
+      The following filters will be locked and hidden:
+    </p>
+    <div class="flex flex-row gap-1 mt-2">
+      <ExploreFilterChipsReadOnly
+        metricsViewNames={[$metricsViewName]}
+        filters={$dashboardStore.whereFilter}
+        dimensionsWithInlistFilter={$dashboardStore.dimensionsWithInlistFilter}
+        dimensionThresholdFilters={$dashboardStore.dimensionThresholdFilters}
+        queryTimeStart={$timeControlStore.timeStart}
+        queryTimeEnd={$timeControlStore.timeEnd}
+      />
+    </div>
+  </div>
+
+  <p class="text-xs text-fg-primary font-normal mt-4 mb-4">
+    Measures and dimensions will be limited to current visible set.
+  </p>
+{/if}
diff --git a/web-admin/src/features/public-urls/canvas-form-utils.ts b/web-admin/src/features/public-urls/canvas-form-utils.ts
new file mode 100644
index 00000000000..a761ca869d0
--- /dev/null
+++ b/web-admin/src/features/public-urls/canvas-form-utils.ts
@@ -0,0 +1,54 @@
+import type { CanvasEntity } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
+import type { V1Expression } from "@rilldata/web-common/runtime-client";
+import { get } from "svelte/store";
+
+/**
+ * Extracts filters from a canvas entity, scoped per metrics view.
+ * Returns a map of metrics view name to filter expression.
+ */
+export function getCanvasFilters(
+  canvasEntity: CanvasEntity,
+): Record<string, V1Expression> | undefined {
+  const filtersMap = get(canvasEntity.filterManager.filterMapStore);
+
+  // Check if there are any non-empty filters
+  const hasFilters = Array.from(filtersMap.values()).some(
+    (expr) => expr?.cond?.exprs && expr.cond.exprs.length > 0,
+  );
+
+  if (!hasFilters) {
+    return undefined;
+  }
+
+  // Convert Map to plain object for API
+  const metricsViewFilters: Record<string, V1Expression> = {};
+  filtersMap.forEach((expr, metricsViewName) => {
+    if (expr?.cond?.exprs && expr.cond.exprs.length > 0) {
+      metricsViewFilters[metricsViewName] = expr;
+    }
+  });
+
+  return Object.keys(metricsViewFilters).length > 0
+    ? metricsViewFilters
+    : undefined;
+}
+
+/**
+ * Checks if the canvas has any active filters.
+ */
+export function hasCanvasFilters(canvasEntity: CanvasEntity): boolean {
+  const filtersMap = get(canvasEntity.filterManager.filterMapStore);
+  return Array.from(filtersMap.values()).some(
+    (expr) => expr?.cond?.exprs && expr.cond.exprs.length > 0,
+  );
+}
+
+/**
+ * Extracts the current canvas state from the URL.
+ * Canvas state is already encoded in URL parameters (tr, f.*, compare_tr, grain, tz).
+ * This function returns the URL state as a string to be passed to the magic auth token API.
+ */
+export function getCanvasStateUrl(currentUrl: URL): string {
+  const searchParams = new URLSearchParams(currentUrl.search);
+  return searchParams.toString();
+}
diff --git a/web-admin/src/routes/[organization]/[project]/-/share/[token]/+page.ts b/web-admin/src/routes/[organization]/[project]/-/share/[token]/+page.ts
index abfe89991ac..34dac8c08ef 100644
--- a/web-admin/src/routes/[organization]/[project]/-/share/[token]/+page.ts
+++ b/web-admin/src/routes/[organization]/[project]/-/share/[token]/+page.ts
@@ -18,25 +18,41 @@ export const load = async ({
     throw error(404, "Unable to find the token's resource");
   }
 
-  const exploreName = tokenMetadata.resources.find(
+  // Check for explore resource
+  const exploreResource = tokenMetadata.resources.find(
     (r) => r.type === ResourceKind.Explore,
-  ); // Assumes only one explore per token
+  );
+
+  // Check for canvas resource
+  const canvasResource = tokenMetadata.resources.find(
+    (r) => r.type === ResourceKind.Canvas,
+  );
 
-  if (!exploreName) {
-    console.error("Token does not have an associated explore");
-    throw error(404, "Unable to find an explore");
+  if (!exploreResource && !canvasResource) {
+    console.error("Token does not have an associated explore or canvas");
+    throw error(404, "Unable to find a dashboard");
   }
 
+  // Determine which resource type to redirect to
+  const resourceType = exploreResource ? "explore" : "canvas";
+  const resourceName = exploreResource?.name || canvasResource?.name;
+
   const redirectUrl = new URL(
-    `/${organization}/${project}/-/share/${token}/explore/${exploreName.name}`,
+    `/${organization}/${project}/-/share/${token}/${resourceType}/${resourceName}`,
     url.origin,
   );
 
   // Get the initial state from the token
   if (tokenResp?.token?.state) {
-    redirectUrl.search = new URLSearchParams({
-      state: tokenResp.token.state,
-    }).toString();
+    if (canvasResource) {
+      // For canvas, state is already URL params, use them directly
+      redirectUrl.search = tokenResp.token.state;
+    } else {
+      // For explore, state is proto-serialized, wrap in state param
+      redirectUrl.search = new URLSearchParams({
+        state: tokenResp.token.state,
+      }).toString();
+    }
   }
 
   throw redirect(307, redirectUrl.toString());
diff --git a/web-admin/src/routes/[organization]/[project]/-/share/[token]/canvas/[dashboard]/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/share/[token]/canvas/[dashboard]/+page.svelte
new file mode 100644
index 00000000000..3813b72001a
--- /dev/null
+++ b/web-admin/src/routes/[organization]/[project]/-/share/[token]/canvas/[dashboard]/+page.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onNavigate } from "$app/navigation";
+  import { page } from "$app/stores";
+  import { createAdminServiceGetProject } from "@rilldata/web-admin/client";
+  import {
+    TokenBannerID,
+    TokenBannerPriority,
+  } from "@rilldata/web-common/components/banner/constants";
+  import CanvasDashboardEmbed from "@rilldata/web-common/features/canvas/CanvasDashboardEmbed.svelte";
+  import CanvasProvider from "@rilldata/web-common/features/canvas/CanvasProvider.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+  $: ({ instanceId } = $runtime);
+
+  $: ({ organization, project, dashboard: canvasName } = $page.params);
+
+  // Query the `GetProject` API with cookie-based auth to determine if the user has access to the original dashboard
+  $: cookieProjectQuery = createAdminServiceGetProject(organization, project);
+  $: ({ data: cookieProject } = $cookieProjectQuery);
+  $: if (cookieProject) {
+    eventBus.emit("add-banner", {
+      id: TokenBannerID,
+      priority: TokenBannerPriority,
+      message: {
+        type: "default",
+        message: `Limited view. For full access and features, visit the <a href='/${organization}/${project}/canvas/${canvasName}'>original dashboard</a>.`,
+        includesHtml: true,
+        iconType: "alert",
+      },
+    });
+  }
+
+  // Clear the banner when navigating away from the Public URL page
+  // (We make sure to not clear it when the user interacts with the dashboard)
+  onNavigate(({ from, to }) => {
+    const currentPath = from?.url.pathname;
+    const newPath = to?.url.pathname;
+    if (newPath !== currentPath) {
+      eventBus.emit("remove-banner", TokenBannerID);
+    }
+  });
+</script>
+
+{#key canvasName}
+  <CanvasProvider {canvasName} {instanceId} projectId={project} showBanner>
+    <CanvasDashboardEmbed {canvasName} />
+  </CanvasProvider>
+{/key}

From 9c0df589324908e8872bd9cf1e322e2c46e84764 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Fri, 30 Jan 2026 19:38:13 +0530
Subject: [PATCH 2/5] update copy

---
 web-admin/src/features/public-urls/CanvasFiltersSection.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-admin/src/features/public-urls/CanvasFiltersSection.svelte b/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
index 1a1b4bf403b..1179ebc78c6 100644
--- a/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
+++ b/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
@@ -94,7 +94,7 @@
 
   <div class="flex flex-col gap-y-1">
     <p class="text-xs text-fg-primary font-normal">
-      The following filters will be locked and hidden:
+      The following filters will be locked:
     </p>
     {#if canvasAppliedFiltersStore}
       <div class="flex flex-col gap-2 my-2">

From c8fb08768a081009809cd1e1940ee8188928a107 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 2 Feb 2026 16:49:12 +0530
Subject: [PATCH 3/5] Hide locked filters from filter bar

---
 .../public-urls/CanvasFiltersSection.svelte   | 102 ++++++++----------
 web-admin/src/features/public-urls/Untitled   |   1 +
 .../features/public-urls/canvas-form-utils.ts |  20 +++-
 3 files changed, 62 insertions(+), 61 deletions(-)
 create mode 100644 web-admin/src/features/public-urls/Untitled

diff --git a/web-admin/src/features/public-urls/CanvasFiltersSection.svelte b/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
index 1179ebc78c6..6203bf1fef7 100644
--- a/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
+++ b/web-admin/src/features/public-urls/CanvasFiltersSection.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
   import type { AdminServiceIssueMagicAuthTokenBody } from "@rilldata/web-admin/client";
   import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
-  import type { CanvasEntity } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
-  import type {
-    FilterManager,
-    UIFilters,
-  } from "@rilldata/web-common/features/canvas/stores/filter-manager";
+  import type { UIFilters } from "@rilldata/web-common/features/canvas/stores/filter-manager";
   import CanvasFilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/CanvasFilterChipsReadOnly.svelte";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
-  import { derived, type Readable } from "svelte/store";
+  import { derived } from "svelte/store";
   import {
     getCanvasFilters,
-    getCanvasStateUrl,
+    getSanitizedCanvasStateUrl,
     hasCanvasFilters,
   } from "./canvas-form-utils";
 
@@ -21,61 +17,53 @@
   export let onProvideFilters: (
     provider: () => Partial<AdminServiceIssueMagicAuthTokenBody>,
   ) => void;
-  let canvasEntity: CanvasEntity | undefined;
-  let canvasFilterManager: FilterManager | undefined;
-  let canvasActiveUIFiltersStore: Readable<UIFilters> | undefined;
-  let canvasAppliedFiltersStore: Readable<UIFilters> | undefined;
 
-  try {
-    const canvasStore = getCanvasStore(dashboard, instanceId);
-    canvasEntity = canvasStore.canvasEntity;
-    canvasFilterManager = canvasEntity.filterManager;
-    canvasActiveUIFiltersStore = canvasFilterManager.activeUIFiltersStore;
+  $: canvasStore = getCanvasStore(dashboard, instanceId);
+  $: canvasEntity = canvasStore.canvasEntity;
+  $: canvasFilterManager = canvasEntity.filterManager;
+  $: canvasActiveUIFiltersStore = canvasFilterManager.activeUIFiltersStore;
 
-    // Create a derived store that only includes filters with actual values (not just pinned ones)
-    canvasAppliedFiltersStore = derived(
-      canvasActiveUIFiltersStore,
-      ($activeFilters) => {
-        const appliedDimensionFilters = new Map();
-        const appliedMeasureFilters = new Map();
+  // Create a derived store that only includes filters with actual values (not just pinned ones)
+  $: canvasAppliedFiltersStore = derived(
+    canvasActiveUIFiltersStore,
+    ($activeFilters) => {
+      const appliedDimensionFilters = new Map();
+      const appliedMeasureFilters = new Map();
 
-        // Filter dimension filters that have selected values or input text
-        $activeFilters.dimensionFilters.forEach((filter, key) => {
-          const hasValues =
-            (filter.selectedValues && filter.selectedValues.length > 0) ||
-            (filter.inputText && filter.inputText.trim() !== "");
-          if (hasValues) {
-            appliedDimensionFilters.set(key, filter);
-          }
-        });
+      // Filter dimension filters that have selected values or input text
+      $activeFilters.dimensionFilters.forEach((filter, key) => {
+        const hasValues =
+          (filter.selectedValues && filter.selectedValues.length > 0) ||
+          (filter.inputText && filter.inputText.trim() !== "");
+        if (hasValues) {
+          appliedDimensionFilters.set(key, filter);
+        }
+      });
 
-        // Filter measure filters that have a filter expression
-        $activeFilters.measureFilters.forEach((filter, key) => {
-          if (filter.filter) {
-            appliedMeasureFilters.set(key, filter);
-          }
-        });
+      // Filter measure filters that have a filter expression
+      $activeFilters.measureFilters.forEach((filter, key) => {
+        if (filter.filter) {
+          appliedMeasureFilters.set(key, filter);
+        }
+      });
 
-        return {
-          dimensionFilters: appliedDimensionFilters,
-          measureFilters: appliedMeasureFilters,
-          complexFilters: $activeFilters.complexFilters,
-          hasFilters:
-            appliedDimensionFilters.size > 0 ||
-            appliedMeasureFilters.size > 0 ||
-            $activeFilters.complexFilters.length > 0,
-          hasClearableFilters:
-            appliedDimensionFilters.size > 0 || appliedMeasureFilters.size > 0,
-        } as UIFilters;
-      },
-    );
-  } catch (e) {
-    console.error("Failed to get canvas store:", e);
-  }
+      return {
+        dimensionFilters: appliedDimensionFilters,
+        measureFilters: appliedMeasureFilters,
+        complexFilters: $activeFilters.complexFilters,
+        hasFilters:
+          appliedDimensionFilters.size > 0 ||
+          appliedMeasureFilters.size > 0 ||
+          $activeFilters.complexFilters.length > 0,
+        hasClearableFilters:
+          appliedDimensionFilters.size > 0 || appliedMeasureFilters.size > 0,
+      } as UIFilters;
+    },
+  );
 
-  $: canvasFilters = canvasEntity ? getCanvasFilters(canvasEntity) : undefined;
-  $: canvasStateUrl = getCanvasStateUrl(new URL(window.location.href));
-  $: hasSomeFilter = canvasEntity ? hasCanvasFilters(canvasEntity) : false;
+  $: canvasFilters = getCanvasFilters(canvasEntity);
+  $: canvasStateUrl = getSanitizedCanvasStateUrl(new URL(window.location.href));
+  $: hasSomeFilter = hasCanvasFilters(canvasEntity);
 
   // Notify parent of filter state changes
   $: onFilterStateChange(hasSomeFilter);
@@ -94,7 +82,7 @@
 
   <div class="flex flex-col gap-y-1">
     <p class="text-xs text-fg-primary font-normal">
-      The following filters will be locked:
+      The following filters will be locked and hidden:
     </p>
     {#if canvasAppliedFiltersStore}
       <div class="flex flex-col gap-2 my-2">
diff --git a/web-admin/src/features/public-urls/Untitled b/web-admin/src/features/public-urls/Untitled
new file mode 100644
index 00000000000..430dbd22cfc
--- /dev/null
+++ b/web-admin/src/features/public-urls/Untitled
@@ -0,0 +1 @@
+getSanitizedCanvasStateUrl
\ No newline at end of file
diff --git a/web-admin/src/features/public-urls/canvas-form-utils.ts b/web-admin/src/features/public-urls/canvas-form-utils.ts
index a761ca869d0..1c80854c062 100644
--- a/web-admin/src/features/public-urls/canvas-form-utils.ts
+++ b/web-admin/src/features/public-urls/canvas-form-utils.ts
@@ -1,4 +1,5 @@
 import type { CanvasEntity } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
+import { ExploreStateURLParams } from "@rilldata/web-common/features/dashboards/url-state/url-params";
 import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import { get } from "svelte/store";
 
@@ -44,11 +45,22 @@ export function hasCanvasFilters(canvasEntity: CanvasEntity): boolean {
 }
 
 /**
- * Extracts the current canvas state from the URL.
- * Canvas state is already encoded in URL parameters (tr, f.*, compare_tr, grain, tz).
- * This function returns the URL state as a string to be passed to the magic auth token API.
+ * Returns the sanitized canvas state from the URL.
+ * Removes filter parameters (f and f.*) so locked filters don't appear in the shared URL.
+ * This ensures we do not leak hidden filter information to the URL recipient.
  */
-export function getCanvasStateUrl(currentUrl: URL): string {
+export function getSanitizedCanvasStateUrl(currentUrl: URL): string {
   const searchParams = new URLSearchParams(currentUrl.search);
+  const filterPrefix: string = ExploreStateURLParams.Filters; // "f"
+
+  // Remove all filter-related parameters (f, f.metricsViewName, etc.)
+  const keysToDelete: string[] = [];
+  searchParams.forEach((_, key) => {
+    if (key === filterPrefix || key.startsWith(`${filterPrefix}.`)) {
+      keysToDelete.push(key);
+    }
+  });
+  keysToDelete.forEach((key) => searchParams.delete(key));
+
   return searchParams.toString();
 }

From 6a279f063700c9a80902c2e17493ea3d9dcebd33 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 9 Feb 2026 17:58:51 +0530
Subject: [PATCH 4/5] check for canvas name in dashboard title

---
 .../[project]/-/settings/public-urls/+page.svelte           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte
index 6c64749fd82..e6a6745ba74 100644
--- a/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte
@@ -57,7 +57,11 @@
   });
 
   function useValidDashboardTitle(dashboard: V1Resource) {
-    return dashboard?.explore?.spec?.displayName || dashboard?.meta.name.name;
+    return (
+      dashboard?.explore?.spec?.displayName ||
+      dashboard?.canvas?.spec?.displayName ||
+      dashboard?.meta.name.name
+    );
   }
 
   // REVISIT when server-side sorting is implemented

From 8fbb4c77b2b15a05b914ce8a3aa88b051a99c0ee Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sat, 7 Mar 2026 02:23:15 +0530
Subject: [PATCH 5/5] fix title regression

---
 .../[project]/-/settings/public-urls/+page.svelte             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte
index 174589edd3d..0eeefa5492a 100644
--- a/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/settings/public-urls/+page.svelte
@@ -44,12 +44,14 @@
 
   $: allRowsWithDashboardTitle = allRows.map((token) => {
     const dashboard = $dashboards.data?.find(
-      (d) => d.meta?.name?.name === token.resourceName,
+      (d) => d.meta?.name?.name === token.resources?.[0]?.name,
     );
+
     return {
       ...token,
       dashboardTitle:
         dashboard?.explore?.spec?.displayName ||
+        dashboard?.canvas?.spec?.displayName ||
         dashboard?.meta?.name?.name ||
         "",
     };