@lobb-js/studio 0.29.0 → 0.30.0

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

@@ -2,9 +2,11 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
+    import { emitEvent } from "../../../eventSystem";
     import Collection from "./collection.svelte";
+    import { onMount } from "svelte";
 
-    const { ctx } = getStudioContext();
+    const { lobb, ctx } = getStudioContext();
     import { Table, Cpu, LibraryBig } from "lucide-svelte";
     import * as Icons from "lucide-svelte";
 
@@ -15,21 +17,40 @@
 
     let { collectionName } = $props();
 
-    const collectionsList = $state(getCollectionsList());
+    // Start empty so unreadable collections never flash. Populated after the
+    // auth.canAccess checks resolve below.
+    let collectionsList = $state<SideBarData>([]);
 
-    function getCollectionsList(): SideBarData {
+    onMount(async () => {
         const collections = ctx.meta.collections;
 
-        const groups = new Map<string, SideBarNode[]>();
+        // 1. Determine which collections the current user can read.
+        //    Virtual collections (identifiers only — no rows) are excluded.
+        const allNames = Object.keys(collections).filter(
+            (name) => !collections[name].virtual,
+        );
+        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;
+                }),
+            )
+        ).filter((n): n is string => n !== null);
 
-        for (const [name, value] of Object.entries(collections)) {
+        // 2. Group the visible collections by their category/owner.
+        const groups = new Map<string, SideBarNode[]>();
+        for (const name of visibleNames) {
+            const value = collections[name];
             let groupKey: string = (value as any).category ?? (value as any).owner;
             if (groupKey === "__project") groupKey = "project";
             else if (groupKey === "__core") groupKey = "core";
 
-            if (!groups.has(groupKey)) {
-                groups.set(groupKey, []);
-            }
+            if (!groups.has(groupKey)) groups.set(groupKey, []);
             groups.get(groupKey)!.push({
                 type: "element",
                 name,
@@ -38,6 +59,7 @@
             });
         }
 
+        // 3. Build the sidebar tree and put `core` last.
         const result: SideBarData = [];
         for (const [groupKey, children] of groups) {
             const extensionIconName = ctx.meta.extensions?.[groupKey]?.icon;
@@ -51,12 +73,12 @@
             });
         }
 
-        return result.sort((a, b) => {
+        collectionsList = result.sort((a, b) => {
             if ((a as any).name === "core") return 1;
             if ((b as any).name === "core") return -1;
             return 0;
         });
-    }
+    });
 </script>
 
 <Sidebar title="Collections" data={collectionsList}>

package/dist/components/routes/data_model/dataModel.svelte

@@ -1,34 +1,12 @@
 <script lang="ts">
     import { SvelteFlowProvider } from "@xyflow/svelte";
     import Flow from "./flow.svelte";
-    import Sidebar from "../../sidebar/sidebar.svelte";
-    import { location } from "@wjfe/n-savant";
-    import SyncManager from "./syncManager.svelte";
-    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
-
-    const currentPage = $derived(location.url.pathname.replace("/studio", "").split("/")[2]);
 </script>
 
-<Sidebar
-    title="Data Model"
-    showSearch={false}
-    data={[
-        { type: "element", name: "graph", href: "/studio/datamodel/graph" },
-        { type: "element", name: "query_editor", href: "/studio/datamodel/query_editor" },
-    ]}
->
-    <div class="relative h-full w-full">
-        {#if currentPage === "graph"}
-            <SvelteFlowProvider>
-                <div style:width="100%" style:height="100%">
-                    <Flow />
-                </div>
-            </SvelteFlowProvider>
-        {:else if currentPage === "query_editor"}
-            <SyncManager />
-        {/if}
-        <div class="absolute top-0 left-0 p-2.5">
-            <SidebarTrigger />
+<div class="relative h-full w-full">
+    <SvelteFlowProvider>
+        <div style:width="100%" style:height="100%">
+            <Flow />
         </div>
-    </div>
-</Sidebar>
+    </SvelteFlowProvider>
+</div>

package/dist/components/routes/data_model/dataModel.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const DataModel: import("svelte").Component<Record<string, never>, {}, "">;
-type DataModel = ReturnType<typeof DataModel>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataModel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataModel = InstanceType<typeof DataModel>;
 export default DataModel;

package/dist/components/routes/extensions/publicExtension.svelte

@@ -0,0 +1,19 @@
+<script>
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { getStudioContext } from "../../../context";
+
+    let { extension, page } = $props();
+
+    const { lobb, ctx } = getStudioContext();
+</script>
+
+<div class="grid h-full w-full overflow-auto bg-background">
+    {#key extension && page}
+        <ExtensionsComponents
+            name="publicPages.{page}"
+            utils={getExtensionUtils(lobb, ctx)}
+            filterByExtensions={[extension]}
+        />
+    {/key}
+</div>

package/dist/components/routes/extensions/publicExtension.svelte.d.ts

@@ -0,0 +1,13 @@
+export default PublicExtension;
+type PublicExtension = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PublicExtension: import("svelte").Component<{
+    extension: any;
+    page: any;
+}, {}, "">;
+type $$ComponentProps = {
+    extension: any;
+    page: any;
+};

package/dist/components/routes/home.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Button from "../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";
 </script>
@@ -21,7 +21,7 @@
                 Icon={ArrowRight}
                 variant="outline"
                 class="h-7 px-3 text-xs font-normal"
-                onclick={() => location.navigate("/studio/collections")}
+                onclick={() => goto("/studio/collections")}
             >
                 Go to collections
             </Button>

package/dist/components/routes/workflows/workflows.svelte

@@ -8,7 +8,7 @@
     const { lobb, ctx } = getStudioContext();
     import Sidebar from "../../sidebar/sidebar.svelte";
     import Button from "../../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";
     import { showDialog } from "../../../actions";
@@ -39,7 +39,7 @@
             const item: SideBarNode = {
                 type: "element",
                 name: workflow.name,
-                onclick: () => location.navigate(`/studio/workflows/${workflow.name}`),
+                onclick: () => goto(`/studio/workflows/${workflow.name}`),
                 meta: { id: workflow.id },
             };
 
@@ -93,7 +93,7 @@
             await lobb.deleteOne("core_workflows", workflowId);
             getSidebarData();
             if (workflowEntry && workflowName === workflowEntry.name) {
-                location.navigate("/studio/workflows");
+                goto("/studio/workflows");
             }
         }
     }
@@ -105,7 +105,7 @@
             <Button
                 class="h-7 px-3 text-xs font-normal w-full"
                 variant="outline"
-                onclick={() => location.navigate("/studio/workflows/new")}
+                onclick={() => goto("/studio/workflows/new")}
                 Icon={Plus}
             >
                 Create a Workflow

package/dist/components/sidebar/sidebar.svelte

@@ -107,7 +107,7 @@
                 {#if showSearch}
                     <div class="p-2">
                         <div
-                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted/30 border rounded-md"
+                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted-soft border rounded-md"
                         >
                             <input
                                 type="text"

package/dist/components/sidebar/sidebarElements.svelte

@@ -30,7 +30,7 @@
     import type { Snippet } from "svelte";
     import SidebarElements from "./sidebarElements.svelte";
     import Button from "../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { page } from "$app/state";
 
     let {
         data = $bindable(),
@@ -58,7 +58,7 @@
         {#each data as node, index}
             {#if node.type === "directory"}
                 <button
-                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted/30 cursor-pointer"
+                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted-soft cursor-pointer"
                     onclick={() => toggleDir(index)}
                 >
                     <div class="flex items-center gap-2">
@@ -83,13 +83,13 @@
                     </div>
                 </div>
             {:else}
-                {@const isselected = location.url.pathname === node.href}
+                {@const isselected = page.url.pathname === node.href}
                 <Button
                     onclick={() => handleElementClick(node)}
                     href={node.href}
                     variant="ghost"
                     class="
-						flex items-center justify-between p-2 gap-2 hover:bg-muted/30 text-muted-foreground
+						flex items-center justify-between p-2 gap-2 hover:bg-muted-soft text-muted-foreground
 						rounded-md {isselected ? 'bg-muted' : ''}
 					"
                     title={node.name}

package/dist/components/singletone.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Save } from "lucide-svelte";
-    import DetailViewForm from "./detailView/detailViewForm.svelte";
-    import { getCollectionFields } from "./detailView/utils";
+    import DetailView from "./detailView/detailView.svelte";
     import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
@@ -9,7 +8,7 @@
     import { toast } from "svelte-sonner";
     import Skeleton from "./ui/skeleton/skeleton.svelte";
 
-    const { lobb, ctx } = getStudioContext();
+    const { lobb } = getStudioContext();
 
     interface Props {
         collectionName: string;
@@ -17,9 +16,8 @@
 
     let { collectionName }: Props = $props();
 
-    let entry = $state({});
+    let entry = $state<Record<string, any>>({});
     let loading = $state(true);
-    const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
         const result = await fetch(`${lobb.lobbUrl}/api/collections/${collectionName}/singleton`, {
@@ -60,7 +58,7 @@
         </div>
     {:else}
         <div class="flex-1 overflow-y-auto max-w-xl">
-            <DetailViewForm bind:value={entry} fields={formFields} />
+            <DetailView {collectionName} bind:entry />
         </div>
     {/if}
 </div>

package/dist/components/ui/button/button.svelte

@@ -49,7 +49,6 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import { LoaderCircle } from "lucide-svelte";
-	import { Link, location } from "@wjfe/n-savant";
 
 	let {
 		class: className,
@@ -94,9 +93,9 @@
 {/snippet}
 
 {#if href}
-	<Link {href} class={cn(buttonVariants({ variant, size }), className)}>
+	<a {href} class={cn(buttonVariants({ variant, size }), className)}>
 		{@render innerPart()}
-	</Link>
+	</a>
 {:else}
 	<button
 		bind:this={ref}

package/dist/components/workflowEditor.svelte

@@ -17,7 +17,7 @@
     const { lobb, ctx } = getStudioContext();
     import Button from "./ui/button/button.svelte";
     import Input from "./ui/input/input.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";
     import { isEqual } from "lodash-es";
@@ -96,7 +96,7 @@
         const reponse = await lobb.createOne("core_workflows", workflow);
         const result = await reponse.json();
         const workflowEntry = result.data;
-        location.navigate(`/studio/workflows/${workflowEntry.name}`);
+        goto(`/studio/workflows/${workflowEntry.name}`);
         await refreshSidebar();
     }
 

package/dist/eventSystem.d.ts

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

package/dist/eventSystem.js

@@ -3,15 +3,17 @@ import { openCreateDetailView, openUpdateDetailView } from "./actions";
 export async function emitEvent(studioContext, eventName, input) {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter((workflow) => {
-        return eventName.startsWith(workflow.eventName);
+        return eventName === workflow.eventName;
     });
     for (let index = 0; index < workflows.length; index++) {
         const workflow = workflows[index];
         try {
-            const localOutput = await workflow.handler(input, await getEventContext(studioContext));
-            if (localOutput) {
-                input = localOutput;
-            }
+            // Whatever the handler returns becomes the input for the next
+            // subscriber and the final emit() return. No special handling of
+            // undefined — chain handlers should return their input, override
+            // handlers return undefined to opt out, observer handlers can
+            // return nothing if no one downstream reads input.
+            input = await workflow.handler(input, await getEventContext(studioContext));
         }
         catch (error) {
             toast.error(error.message);

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

@@ -11,7 +11,8 @@ import type CreateDetailViewButton from "../components/detailView/create/createD
 import type UpdateDetailViewButton from "../components/detailView/update/updateDetailViewButton.svelte";
 import type { mediaQueries } from "../utils";
 import type Table from "../components/dataTable/table.svelte";
-import type { Location } from "@wjfe/n-savant";
+import type { page } from "$app/state";
+import type { goto } from "$app/navigation";
 import type RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import type DataTable from "../components/dataTable/dataTable.svelte";
 import type Drawer from "../components/drawer.svelte";
@@ -22,7 +23,7 @@ import * as Icons from "lucide-svelte";
 import { ContextMenu } from "bits-ui";
 import * as Tooltip from "../components/ui/tooltip";
 import * as Breadcrumb from "../components/ui/breadcrumb";
-import { showDialog } from "../actions";
+import { showDialog, type OpenDataTableDrawerProps, type OpenDataTablePopupProps } from "../actions";
 import { toast } from "svelte-sonner";
 import { Switch } from "../components/ui/switch";
 export interface Components {
@@ -50,18 +51,24 @@ export interface Components {
 export interface ExtensionUtils {
     ctx: CTX;
     lobb: LobbClient;
-    location: Location;
+    /**
+     * SvelteKit's reactive page proxy — exposes `url`, `params`, `route`,
+     * `data`, `state`, `error`. Access fields through the proxy
+     * (`utils.page.url.pathname`); don't destructure if you need
+     * reactivity (`const { url } = utils.page` is a one-time snapshot).
+     */
+    page: typeof page;
+    /**
+     * SvelteKit's client-side navigation. Same signature as
+     * `goto(href, options?)` — supports `replaceState`, `invalidateAll`,
+     * `noScroll`, `keepFocus`, etc.
+     */
+    goto: typeof goto;
     toast: typeof toast;
     showDialog: typeof showDialog;
-    openDataTableDrawer: (props: {
-        collectionName: string;
-        filter?: Record<string, any>;
-        title?: string;
-        showHeader?: boolean;
-        showFooter?: boolean;
-        position?: "side" | "bottom";
-    }) => void;
-    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
+    openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    openDataTablePopup: (props: OpenDataTablePopupProps) => void;
+    emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;
@@ -72,6 +79,24 @@ interface DashboardNav {
     href?: string;
     onclick?: () => void;
     navs?: DashboardNav[];
+    /**
+     * The collection(s) this nav item represents — i.e. the UI surface it
+     * exposes for that data.
+     *
+     * Visibility is derived from this: the auth extension's `auth.canAccess`
+     * workflow checks the current user's read permission on the represented
+     * collection(s), and the item is hidden if denied. Items without a
+     * `represents` value are always visible.
+     *
+     * @example
+     * // single collection
+     * { label: "Reports", href: "/reports", icon: BarChart, represents: "reports_dashboards" }
+     *
+     * @example
+     * // multiple collections — user must be able to read all of them
+     * { label: "Audit", href: "/audit", icon: ShieldCheck, represents: ["audit_log", "auth_users"] }
+     */
+    represents?: string | string[];
 }
 export interface DashboardNavs {
     top?: DashboardNav[];
@@ -82,7 +107,7 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
-export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
+export type ExtensionComponentKey = `pages.${string}` | `publicPages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | "detailView.field.label" | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
 export type ExtensionComponent = any | {
     component: any;
     when: (props: Record<string, any>) => boolean;
@@ -94,7 +119,7 @@ export interface StudioWorkflowContext {
 }
 export interface StudioWorkflow {
     eventName: string;
-    handler: (input: Record<string, any>, context: StudioWorkflowContext) => Promise<any>;
+    handler: (input: any, context: StudioWorkflowContext) => Promise<any>;
 }
 export interface Extension {
     name: string;

package/dist/extensions/extensionUtils.js

@@ -1,5 +1,5 @@
 import { toast } from "svelte-sonner";
-import { showDialog, openDataTableDrawer } from "../actions";
+import { showDialog, openDataTableDrawer, openDataTablePopup } from "../actions";
 import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
@@ -18,7 +18,8 @@ import * as Breadcrumb from "../components/ui/breadcrumb";
 import { ContextMenu } from "bits-ui";
 import * as Popover from "../components/ui/popover";
 import * as Icons from "lucide-svelte";
-import { location } from "@wjfe/n-savant";
+import { page } from "$app/state";
+import { goto } from "$app/navigation";
 import RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import DataTable from "../components/dataTable/dataTable.svelte";
 import Drawer from "../components/drawer.svelte";
@@ -52,10 +53,12 @@ export function getExtensionUtils(lobb, ctx) {
     return {
         ctx: ctx,
         lobb: lobb,
-        location: location,
+        page: page,
+        goto: goto,
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
+        openDataTablePopup: (props) => openDataTablePopup({ lobb, ctx }, props),
         emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
         components: getComponents(),
         mediaQueries: mediaQueries,

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export type { ExtensionProps, Extension, ExtensionUtils } from "./extensions/extension.types";
-export { default as Studio } from "./components/Studio.svelte";
+export { default as StudioRoot } from "./components/StudioRoot.svelte";
 export { default as Landing } from "./components/landing.svelte";
+export { remountStudio } from "./studioLifecycle.svelte";
 export { Button } from "./components/ui/button";
 export { Input } from "./components/ui/input";
 export { Separator } from "./components/ui/separator";
@@ -10,6 +11,7 @@ export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
 export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
 export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
 export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export { default as DetailView } from "./components/detailView/detailView.svelte";
 export * as Tooltip from "./components/ui/tooltip";
 export * as Breadcrumb from "./components/ui/breadcrumb";
 export { ContextMenu } from "bits-ui";

package/dist/index.js

@@ -1,5 +1,6 @@
-export { default as Studio } from "./components/Studio.svelte";
+export { default as StudioRoot } from "./components/StudioRoot.svelte";
 export { default as Landing } from "./components/landing.svelte";
+export { remountStudio } from "./studioLifecycle.svelte";
 export { Button } from "./components/ui/button";
 export { Input } from "./components/ui/input";
 export { Separator } from "./components/ui/separator";
@@ -9,6 +10,7 @@ export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
 export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
 export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
 export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export { default as DetailView } from "./components/detailView/detailView.svelte";
 export * as Tooltip from "./components/ui/tooltip";
 export * as Breadcrumb from "./components/ui/breadcrumb";
 export { ContextMenu } from "bits-ui";

package/dist/store.types.d.ts

@@ -1,5 +1,5 @@
 import type { Extension } from "./extensions/extension.types";
-interface CollectionTab {
+export interface CollectionTab {
     id?: string;
     label: string;
     filter?: Record<string, any>;

package/dist/studioLifecycle.svelte.d.ts

@@ -0,0 +1,2 @@
+export declare function getStudioMountKey(): number;
+export declare function remountStudio(): void;

package/dist/studioLifecycle.svelte.js

@@ -0,0 +1,15 @@
+// Module-level reactive signal that the Studio root listens to via {#key ...}.
+// Bumping this value tears down the entire Studio component tree and mounts
+// a fresh one, so onStartup re-runs and everything downstream (ctx,
+// extensions, sidebar) initialises with the new session state.
+//
+// Use cases: after login, after logout, after a role/permissions change.
+// Consumers (e.g. the auth extension) call `remountStudio()` instead of
+// having every UI surface listen for auth changes reactively.
+let mountKey = $state(0);
+export function getStudioMountKey() {
+    return mountKey;
+}
+export function remountStudio() {
+    mountKey += 1;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.31.9",
+    "@lobb-js/core": "^0.32.1",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
@@ -87,7 +87,7 @@
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
     "@internationalized/date": "^3.12.0",
-    "@lobb-js/sdk": "^0.2.0",
+    "@lobb-js/sdk": "^0.2.1",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tiptap/core": "^3.0.0",
@@ -95,7 +95,6 @@
     "@tiptap/extension-underline": "^3.0.0",
     "@tiptap/pm": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",
-    "@wjfe/n-savant": "^0.3.0",
     "@xyflow/svelte": "^1.2.0",
     "bits-ui": "^1.8.0",
     "clsx": "^2.1.1",

package/src/app.css

@@ -20,6 +20,7 @@
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
+  --muted-soft: oklch(0.9904 0.0021 247.896);
   --accent: oklch(0.968 0.007 247.896);
   --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
@@ -54,6 +55,7 @@
   --secondary-foreground: oklch(0.984 0.003 247.858);
   --muted: oklch(0.279 0.041 260.031);
   --muted-foreground: oklch(0.704 0.04 256.788);
+  --muted-soft: oklch(0.174 0.042 263.3);
   --accent: oklch(0.279 0.041 260.031);
   --accent-foreground: oklch(0.984 0.003 247.858);
   --destructive: oklch(0.704 0.191 22.216);
@@ -92,6 +94,7 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-muted-soft: var(--muted-soft);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);