@lobb-js/studio 0.1.32 → 0.1.34

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "dist",
+    "src/lib/components",
     "vite-plugins"
   ],
   "exports": {

package/{dist → src/lib/components}/LlmButton.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { lobb } from "..";
+	import { lobb } from "$lib";
 	import { Brain, LoaderIcon, Send } from "lucide-svelte";
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import * as Popover from "./ui/popover";
 	import Textarea from "./ui/textarea/textarea.svelte";
 	import { toast } from "svelte-sonner";
-	import { ctx } from "../store.svelte";
+	import { ctx } from "$lib/store.svelte";
 
 	interface LocalProp {
 		value?: any;

package/{dist → src/lib/components}/Studio.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-    import { Toaster } from "./ui/sonner";
+    import { Toaster } from "$lib/components/ui/sonner";
     import { onMount, onDestroy } from "svelte";
     import { ModeWatcher } from "mode-watcher";
-    import { ctx } from "../store.svelte";
-    import { lobb } from "..";
-    import Header from "./header.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { lobb } from "$lib";
+    import Header from "$lib/components/header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import Dialog from "./confirmationDialog/confirmationDialog.svelte";
-    import MiniSidebar from "./miniSidebar.svelte";
-    import SetServerPage from "./setServerPage.svelte";
-    import * as Tooltip from "./ui/tooltip";
+    import Dialog from "$lib/components/confirmationDialog/confirmationDialog.svelte";
+    import MiniSidebar from "$lib/components/miniSidebar.svelte";
+    import SetServerPage from "$lib/components/setServerPage.svelte";
+    import * as Tooltip from "$lib/components/ui/tooltip";
     import { Router, Route, Fallback, init as initRouter,  } from "@wjfe/n-savant";
     import {
         executeExtensionsOnStartup,
         loadExtensions,
-    } from "../extensions/extensionUtils";
-    import { mediaQueries } from "../utils";
+    } from "$lib/extensions/extensionUtils";
+    import { mediaQueries } from "$lib/utils";
     import Home from "../../routes/home.svelte";
     import DataModel from "../../routes/data_model/dataModel.svelte";
     import Collections from "../../routes/collections/collections.svelte";

package/{dist → src/lib/components}/alertView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as Alert from "./ui/alert/index.js";
+  import * as Alert from "$lib/components/ui/alert/index.js";
   import { AlertCircleIcon } from "lucide-svelte";
   import type { Snippet } from "svelte";
 

package/{dist → src/lib/components}/breadCrumbs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Breadcrumb from "./ui/breadcrumb";
-	import { ctx } from "../store.svelte";
-	import { mediaQueries } from "../utils";
+	import { ctx } from "$lib/store.svelte";
+	import { mediaQueries } from "$lib/utils";
 	import { location } from "@wjfe/n-savant";
 
 	const isSmall = $derived(!mediaQueries.sm.current);

package/{dist → src/lib/components}/combobox.svelte

@@ -2,10 +2,10 @@
     import CheckIcon from "@lucide/svelte/icons/check";
     import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
     import { tick } from "svelte";
-    import * as Command from "./ui/command/index.js";
-    import * as Popover from "./ui/popover/index.js";
-    import { Button } from "./ui/button/index.js";
-    import { cn } from "../utils.js";
+    import * as Command from "$lib/components/ui/command/index.js";
+    import * as Popover from "$lib/components/ui/popover/index.js";
+    import { Button } from "$lib/components/ui/button/index.js";
+    import { cn } from "$lib/utils.js";
     import type { HTMLButtonAttributes } from "svelte/elements";
 
     interface Option {

package/{dist → src/lib/components}/confirmationDialog/confirmationDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as AlertDialog from "../ui/alert-dialog/index";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog/index";
 	import { Check, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 

package/src/lib/components/confirmationDialog/store.svelte.ts

@@ -0,0 +1,28 @@
+import { mount, unmount } from "svelte";
+import ConfirmationDialog from "./confirmationDialog.svelte";
+
+export function showDialog(title: string, description: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        const targetElement = document.querySelector('main');
+
+        if (!targetElement) {
+            throw new Error("main html element doesn't exist for some reason");
+        }
+
+        const mountedElement = mount(ConfirmationDialog, {
+            target: targetElement,
+            props: {
+                title,
+                description,
+                onDecision: async (result: boolean) => {
+                    resolve(result);
+                    await unmount(mountedElement, {
+                        outro: true
+                    });
+                }
+            },
+        });
+
+        console.log("the dialog is mounted man")
+    });
+}

package/{dist → src/lib/components}/createManyButton.svelte

@@ -4,8 +4,8 @@
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import { toast } from "svelte-sonner";
 	import MonacoEditor from "./monacoEditor.svelte";
-	import { lobb } from "..";
-	import { calculateDrawerWidth } from "../utils";
+	import { lobb } from "$lib";
+	import { calculateDrawerWidth } from "$lib/utils";
   import Drawer from "./drawer.svelte";
 
 	interface LocalProps extends ButtonProps {

package/{dist → src/lib/components}/dataTable/childRecords.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { ctx } from "../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import { ChevronRight, Plus, Smartphone, Table } from "lucide-svelte";
     import DataTable from "./dataTable.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
 
     interface Props {
         collectionName: string;

package/{dist → src/lib/components}/dataTable/dataTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import _ from "lodash";
-    import { lobb } from "../..";
+    import { lobb } from "$lib";
     import Footer from "./footer.svelte";
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
@@ -10,11 +10,11 @@
     import ChildRecords from "./childRecords.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
-    import { ctx } from "../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import Button from "../ui/button/button.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
-    import { emitEvent } from "../../eventSystem";
+    import { emitEvent } from "$lib/eventSystem";
     import type { Snippet } from "svelte";
 
     interface Props {

package/{dist → src/lib/components}/dataTable/fieldCell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getFieldRelation } from "../../utils";
+    import { getFieldRelation } from "$lib/utils";
     import { ExternalLink } from "lucide-svelte";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { getField } from "./utils";

package/{dist → src/lib/components}/dataTable/filter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import * as Popover from "../ui/popover/index.js";
+    import * as Popover from "$lib/components/ui/popover/index.js";
     import Filter from "./filter.svelte";
     import {
         Plus,
@@ -11,7 +11,7 @@
     } from "lucide-svelte";
     import { buttonVariants } from "../ui/button";
     import _ from "lodash";
-    import { ctx } from "../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import Button from "../ui/button/button.svelte";
 
     interface Props {

package/{dist → src/lib/components}/dataTable/filterButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Popover from "../ui/popover/index.js";
+	import * as Popover from "$lib/components/ui/popover/index.js";
 	import { ListFilter } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";

package/{dist → src/lib/components}/dataTable/header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ctx } from "../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import { ListRestart, Plus, SquareStack, Trash } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
@@ -7,7 +7,7 @@
     import Button from "../ui/button/button.svelte";
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
-    import { lobb } from "../..";
+    import { lobb } from "$lib";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import type { Snippet } from "svelte";
 

package/{dist → src/lib/components}/dataTable/sort.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import _ from "lodash";
 
-    import * as Popover from "../ui/popover/index.js";
+    import * as Popover from "$lib/components/ui/popover/index.js";
     import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
     import Button, { buttonVariants } from "../ui/button/button.svelte";
     import Label from "../ui/label/label.svelte";
     import Switch from "../ui/switch/switch.svelte";
-    import { ctx } from "../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import { getFieldIcon } from "./utils";
 
     interface Props {

package/{dist → src/lib/components}/dataTable/sortButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Popover from "../ui/popover/index.js";
+	import * as Popover from "$lib/components/ui/popover/index.js";
 	import { ArrowDownWideNarrow } from "lucide-svelte";
-	import { buttonVariants } from "../ui/button";
+	import { buttonVariants } from "$lib/components/ui/button";
 	import Sort from "./sort.svelte";
 
 	interface Props {

package/src/lib/components/dataTable/utils.ts

@@ -0,0 +1,127 @@
+import type { TableProps } from "./table.svelte";
+
+import { ctx } from "$lib/store.svelte";
+import {
+    Binary,
+    Braces,
+    Brackets,
+    Calendar,
+    CalendarClock,
+    Clock,
+    Hash,
+    Key,
+    Text,
+    Type,
+} from "lucide-svelte/icons";
+
+export function getCollectionColumns(collectionName: string): TableProps['columns'] {
+    const collectionFields = getFields(collectionName);
+    const headers: TableProps['columns'] = [];
+    for (const fieldName in collectionFields) {
+        const field = collectionFields[fieldName];
+        headers.push({
+            id: field.key,
+            subtext: field.type,
+            icon: getFieldIcon(fieldName, collectionName),
+        });
+    }
+    return headers;
+}
+
+export function getFieldIcon(fieldName: string, collectionName: string) {
+	const field = getField(fieldName, collectionName);
+	if (fieldName === "id") {
+		return Key;
+	} else if (field.type === "string") {
+		return Type;
+	} else if (field.type === "text") {
+		return Text;
+	} else if (field.type === "object") {
+		return Braces;
+	} else if (field.type === "array") {
+		return Brackets;
+	} else if (field.type === "bool") {
+		return Binary;
+	} else if (field.type === "integer") {
+		return Hash;
+	} else if (field.type === "long") {
+		return Hash;
+	} else if (field.type === "float") {
+		return Hash;
+	} else if (field.type === "decimal") {
+		return Hash;
+	} else if (field.type === "date") {
+		return Calendar;
+	} else if (field.type === "datetime") {
+		return CalendarClock;
+	} else if (field.type === "time") {
+		return Clock;
+	}
+
+	throw new Error(`(${field.type}) doesnt have an icon`);
+}
+
+export function getFields(collectionName: string) {
+	return ctx.meta.collections[collectionName].fields;
+}
+
+export function getField(fieldName: string, collectionName: string) {
+	return getFields(collectionName)[fieldName];
+}
+
+export function getCollectionPrimaryField(collectionName: string): string | undefined {
+	const collectionFields =
+			ctx.meta.collections[collectionName].fields;
+
+	const primaryFieldObject: any = Object.values(collectionFields).find(
+		(field) => (field as any).type === "string",
+	);
+
+	if (
+		primaryFieldObject &&
+		typeof primaryFieldObject === "object" &&
+		"key" in primaryFieldObject
+	) {
+		const fieldName = primaryFieldObject.key;
+		return fieldName;
+	}
+}
+
+export function getCollectionParamsFields(collectionName: string, allFields = false) {
+	const relations = ctx.meta.relations;
+	const foreignFields = relations
+		.filter((relation) => {
+			return relation.from.collection === collectionName
+		})
+		.map((relation) => {
+			return {
+				field: relation.from.field,
+				collection: relation.to.collection,
+			};
+		});
+
+	const columns = [];
+	for (let index = 0; index < foreignFields.length; index++) {
+		const foreignField = foreignFields[index];
+		if (!foreignField.collection) {
+			continue;
+		}
+		columns.push(`${foreignField.field}.id`);
+
+		if (!allFields) {
+			const primaryField = getCollectionPrimaryField(foreignField.collection)
+			if (primaryField) {
+				columns.push(`${foreignField.field}.${primaryField}`);
+			}
+		} else {
+			const fieldNames = Object.keys(ctx.meta.collections[foreignField.collection].fields);
+			for (let index = 0; index < fieldNames.length; index++) {
+				const fieldName = fieldNames[index];
+				columns.push(`${foreignField.field}.${fieldName}`);
+			}
+		}
+	}
+
+	const foreignColumns = columns.join(",");
+	return `*${foreignColumns ? `,${foreignColumns}` : ""}`;
+}

package/{dist → src/lib/components}/detailView/create/children.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { ctx } from "../../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import { Link } from "lucide-svelte";
     import CreateManyView from "./createManyView.svelte";
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import ExtensionsComponents from "$lib/components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
 
     interface LocalProp {
         collectionName: string;

package/{dist → src/lib/components}/detailView/create/createDetailView.svelte

@@ -18,12 +18,12 @@
 
 <script lang="ts">
     import { ArrowLeft, Plus, X } from "lucide-svelte";
-    import Button from "../../ui/button/button.svelte";
-    import { lobb } from "../../..";
+    import Button from "$lib/components/ui/button/button.svelte";
+    import { lobb } from "$lib";
     import { toast } from "svelte-sonner";
-    import { ctx } from "../../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
     import {
@@ -34,8 +34,8 @@
     } from "../utils";
     import type { Snippet } from "svelte";
     import FieldInput from "../fieldInput.svelte";
-    import { emitEvent } from "../../../eventSystem";
-    import Drawer from "../../drawer.svelte";
+    import { emitEvent } from "$lib/eventSystem";
+    import Drawer from "$lib/components/drawer.svelte";
 
     let {
         collectionName,

package/{dist → src/lib/components}/detailView/create/createDetailViewButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { CreateDetailViewProp } from "./createDetailView.svelte";
-	import type { ButtonProps } from "../../ui/button/button.svelte";
-	import Button from "../../ui/button/button.svelte";
+	import type { ButtonProps } from "$lib/components/ui/button/button.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
     import { openCreateDetailView } from "../store.svelte";
 
 	interface LocalProp extends CreateDetailViewProp {

package/{dist → src/lib/components}/detailView/create/createManyView.svelte

@@ -11,12 +11,12 @@
     import Table, { type TableProps } from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import CreateDetailViewButton from "./createDetailViewButton.svelte";
-    import { getCollectionColumns } from "../../dataTable/utils";
-    import SelectRecord from "../../selectRecord.svelte";
-    import FieldCell from "../../dataTable/fieldCell.svelte";
+    import { getCollectionColumns } from "$lib/components/dataTable/utils";
+    import SelectRecord from "$lib/components/selectRecord.svelte";
+    import FieldCell from "$lib/components/dataTable/fieldCell.svelte";
     import SubRecords from "./subRecords.svelte";
-    import ChildRecords from "../../dataTable/childRecords.svelte";
-    import { ctx } from "../../../store.svelte";
+    import ChildRecords from "$lib/components/dataTable/childRecords.svelte";
+    import { ctx } from "$lib/store.svelte";
 
     interface ParentRecord {
         id: string;

package/{dist → src/lib/components}/detailView/create/subRecords.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ctx } from "../../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import CreateManyView from "./createManyView.svelte";
 
     interface Props {

package/{dist → src/lib/components}/detailView/fieldInput.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { ctx } from "../../store.svelte";
+	import { ctx } from "$lib/store.svelte";
 	import {
 		getDiscriminatorFieldRelation,
 		getFieldRelation,
-	} from "../../utils";
+	} from "$lib/utils";
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import { getField } from "../dataTable/utils";
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
 	import Combobox from "../combobox.svelte";
-	import * as Select from "../ui/select/index";
+	import * as Select from "$lib/components/ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
 	import ForeingKeyInput from "../foreingKeyInput.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
 
 	interface Props {
 		collectionName: string;

package/{dist → src/lib/components}/detailView/fieldInputReplacement.svelte

@@ -2,7 +2,7 @@
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../ui/select/index";
+	import * as Select from "$lib/components/ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
   	import type { EntryField } from "./detailViewForm.svelte";
   	import type { Snippet } from "svelte";

package/src/lib/components/detailView/store.svelte.ts

@@ -0,0 +1,61 @@
+import type { CreateDetailViewProp } from "./create/createDetailView.svelte";
+import type { UpdateDetailViewProp } from "./update/updateDetailView.svelte";
+import CreateDetailView from "./create/createDetailView.svelte";
+import UpdateDetailView from "./update/updateDetailView.svelte";
+import { lobb } from "$lib";
+import { getCollectionParamsFields } from "../dataTable/utils";
+import { mount, unmount } from "svelte";
+
+export function openCreateDetailView(props: CreateDetailViewProp) {
+    const targetElement = document.querySelector('main');
+
+    if (!targetElement) {
+        throw new Error("main html element doesn't exist for some reason")
+    }
+
+    const mountedCreateDetailView = mount(CreateDetailView, {
+        target: targetElement,
+        props: {
+            ...props,
+            onCancel: async () => {
+                props.onCancel?.()
+                await unmount(mountedCreateDetailView, {
+                    outro: true
+                });
+            }
+        },
+    })
+}
+
+export async function openUpdateDetailView(props: UpdateDetailViewProp) {
+    let params = {
+        fields: getCollectionParamsFields(props.collectionName, true),
+        filter: {
+            id: props.recordId,
+        },
+        limit: 1,
+    };
+    const response = await lobb.findAll(props.collectionName, params);
+    const result = await response.json();
+    const entry = result.data[0];
+
+    const targetElement = document.querySelector('main');
+
+    if (!targetElement) {
+        throw new Error("main html element doesn't exist for some reason")
+    }
+
+    const mountedUpdateDetailView = mount(UpdateDetailView, {
+        target: targetElement,
+        props: {
+            ...props,
+            onCancel: async () => {
+                props.onCancel?.()
+                await unmount(mountedUpdateDetailView, {
+                    outro: true
+                });
+            },
+            values: entry,
+        },
+    })
+}

package/{dist → src/lib/components}/detailView/update/children.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import DataTable from "../../dataTable/dataTable.svelte";
-    import { ctx } from "../../../store.svelte";
+    import DataTable from "$lib/components/dataTable/dataTable.svelte";
+    import { ctx } from "$lib/store.svelte";
     import { Link, Plus, TableIcon } from "lucide-svelte";
     import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import ExtensionsComponents from "$lib/components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
 
     interface LocalProp {
         collectionName: string;

package/{dist → src/lib/components}/detailView/update/updateDetailView.svelte

@@ -19,20 +19,20 @@
 
 <script lang="ts">
     import { ArrowLeft, Pencil, X } from "lucide-svelte";
-    import Button from "../../ui/button/button.svelte";
+    import Button from "$lib/components/ui/button/button.svelte";
     import { fade, fly } from "svelte/transition";
-    import { lobb } from "../../..";
+    import { lobb } from "$lib";
     import { toast } from "svelte-sonner";
-    import { ctx } from "../../../store.svelte";
+    import { ctx } from "$lib/store.svelte";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import { calculateDrawerWidth, getChangedProperties } from "../../../utils";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
+    import { calculateDrawerWidth, getChangedProperties } from "$lib/utils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "../update/children.svelte";
     import type { Snippet } from "svelte";
     import { getDefaultEntry, parseDetailViewValues, serializeEntry } from "../utils";
     import FieldInput from "../fieldInput.svelte";
-  import Drawer from "../../drawer.svelte";
+  import Drawer from "$lib/components/drawer.svelte";
 
     let {
         collectionName,

package/{dist → src/lib/components}/detailView/update/updateDetailViewButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
-	import type { ButtonProps } from "../../ui/button/button.svelte";
-	import Button from "../../ui/button/button.svelte";
+	import type { ButtonProps } from "$lib/components/ui/button/button.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
     import { openUpdateDetailView } from "../store.svelte";
 
 	interface LocalProp extends UpdateDetailViewProp {