fuma 0.2.6 → 0.3.3

package/dist/api/client.d.ts

@@ -0,0 +1,3 @@
+import { type CreateAxiosDefaults } from 'axios';
+import type { TypeMap, ApiConfig, ApiClient } from './config.js';
+export declare function useApiClient<T extends TypeMap, C extends ApiConfig<T>>(prismaConfig: C, axiosConfig?: CreateAxiosDefaults): ApiClient<T, C>;

package/dist/api/client.js

@@ -0,0 +1,24 @@
+import axios, {} from 'axios';
+import * as devalue from 'devalue';
+export function useApiClient(prismaConfig, axiosConfig = {}) {
+    const _axios = axios.create({ baseURL: '/api', ...axiosConfig });
+    function useSearch(model) {
+        return async (search) => {
+            const config = { params: { search, model } };
+            const { data, headers } = await _axios.get('', config);
+            ensureJson(headers);
+            return devalue.unflatten(data);
+        };
+    }
+    const api = Object.keys(prismaConfig).reduce((acc, model) => ({
+        ...acc,
+        [model]: useSearch(model)
+    }), {});
+    return api;
+}
+function ensureJson(headers) {
+    const contentType = headers['content-type'];
+    if (contentType !== 'application/json') {
+        throw new Error(`Response Content-type is '${contentType}' instead 'application/json'`);
+    }
+}

package/dist/api/config.d.ts

@@ -0,0 +1,46 @@
+import type { OperationPayload, GetResult } from '@prisma/client/runtime/library.js';
+export type Operation = 'findFirst' | 'findFirstOrThrow' | 'findUnique' | 'findUniqueOrThrow' | 'findMany' | 'create' | 'createMany' | 'update' | 'updateMany' | 'upsert' | 'delete' | 'deleteMany' | 'aggregate' | 'count' | 'groupBy';
+export type TypeMap = {
+    model: {
+        [M: string]: {
+            payload: OperationPayload;
+            operations: {
+                [O in Operation]: {
+                    args: {};
+                };
+            };
+        };
+    };
+};
+export type Result<T extends TypeMap, M extends keyof T['model'], Query extends {}, Payload extends T['model'][M]['payload'] = T['model'][M]['payload']> = GetResult<Payload, Query, 'findMany'>;
+export type Query<T extends TypeMap, M extends keyof T['model'], O extends Operation = 'findMany'> = T['model'][M]['operations'][O]['args'];
+export type QueryToResult<T extends TypeMap, M extends keyof T['model'], O extends Operation = 'findMany', Q extends Query<T, M, O> = {}> = (query: Q) => Promise<Result<T, M, Q>>;
+export type ApiPrismaClient<T extends TypeMap> = {
+    [M in keyof T['model']]: {
+        [O in Operation]: QueryToResult<T, M, O>;
+    };
+};
+/**
+ * @example
+ * const config = {
+ *		user: (contains) => ({ where: { username: { contains } } }),
+ * } satisfies ApiConfig<Prisma.TypeMap>
+ */
+export type ApiConfig<T extends TypeMap> = {
+    [M in keyof T['model']]?: (search: string) => Query<T, M, 'findMany'>;
+};
+export type ApiClient<T extends TypeMap, C extends ApiConfig<T>> = {
+    [M in keyof C]: C[M] extends (...args: any) => infer Q ? (search: string) => Promise<Result<T, M & string, Q & {}>> : never;
+};
+export type ModelApiQuery = {
+    model: string;
+    search?: string;
+    take?: number;
+    skip?: number;
+};
+export declare const modelApiQuery: {
+    model: import("zod").ZodString;
+    search: import("zod").ZodDefault<import("zod").ZodString>;
+    take: import("zod").ZodDefault<import("zod").ZodNumber>;
+    skip: import("zod").ZodDefault<import("zod").ZodNumber>;
+};

package/dist/api/config.js

@@ -0,0 +1,7 @@
+import { z } from '../validation/zod.js';
+export const modelApiQuery = {
+    model: z.string(),
+    search: z.string().default(''),
+    take: z.number().default(10),
+    skip: z.number().default(0)
+};

package/dist/api/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config.js';
+export * from './client.js';
+export * from './server.js';

package/dist/api/index.js

@@ -0,0 +1,3 @@
+export * from './config.js';
+export * from './client.js';
+export * from './server.js';

package/dist/api/server.d.ts

@@ -0,0 +1,11 @@
+import { type RequestHandler } from '@sveltejs/kit';
+import { type ApiConfig, type TypeMap } from './config.js';
+interface BasicPrismaClient {
+    [K: string]: any;
+    $connect: any;
+    $transaction: any;
+}
+export declare function apiServer<T extends TypeMap>(config: ApiConfig<T>, client: BasicPrismaClient): {
+    GET: RequestHandler;
+};
+export {};

package/dist/api/server.js

@@ -0,0 +1,17 @@
+import { error } from '@sveltejs/kit';
+import { json } from '../server/json.js';
+import { parseQuery } from '../server/parseQuery.js';
+import { modelApiQuery } from './config.js';
+export function apiServer(config, client) {
+    return {
+        async GET(event) {
+            const { model, search, take, skip } = parseQuery(event.url, modelApiQuery);
+            if (!(model in config))
+                error(400, `Model "${model}" is not exposed in this API.`);
+            const baseQuery = { take, skip };
+            //@ts-ignore
+            const result = await client[model].findMany({ ...baseQuery, ...config[model](search) });
+            return json(result);
+        }
+    };
+}

package/dist/{Meta.svelte → private/Meta.svelte}

@@ -1,9 +1,9 @@
 <script>import {} from "svelte";
 import { slide } from "svelte/transition";
 import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
-import { Card } from "./ui/card/index.js";
-import { Table } from "./ui/table/index.js";
-import { Icon } from "./ui/icon/index.js";
+import { Card } from "../ui/card/index.js";
+import { Table } from "../ui/table/index.js";
+import { Icon } from "../ui/icon/index.js";
 export let name = "";
 export let description = "";
 export let component;
@@ -27,7 +27,7 @@ function updateComponentMeta(c) {
 }
 </script>
 
-<Card class="mx-auto mt-6 max-w-4xl">
+<Card class="mx-auto mb-6 max-w-4xl">
 	<div slot="title" class="flex items-center gap-4">
 		<span class="grow">{name}</span>
 		<button class="btn btn-square btn-sm" on:click={() => (isPropsVisible = !isPropsVisible)}>

package/dist/private/api.d.ts

@@ -0,0 +1,61 @@
+import type { Prisma } from '@prisma/client';
+export declare const apiConfig: {
+    Tag: (search: string) => {
+        where: {
+            name: {
+                contains: string;
+            };
+        };
+    };
+    Post: (search: string) => {
+        where: {
+            tags: {
+                some: {
+                    name: {
+                        contains: string;
+                    };
+                };
+            };
+        };
+        include: {
+            tags: true;
+        };
+    };
+    PostType: (search: string) => {
+        where: {
+            name: {
+                contains: string;
+            };
+        };
+    };
+};
+export declare const api: import("../api/config.js").ApiClient<Prisma.TypeMap<import("@prisma/client/runtime/library").DefaultArgs>, {
+    Tag: (search: string) => {
+        where: {
+            name: {
+                contains: string;
+            };
+        };
+    };
+    Post: (search: string) => {
+        where: {
+            tags: {
+                some: {
+                    name: {
+                        contains: string;
+                    };
+                };
+            };
+        };
+        include: {
+            tags: true;
+        };
+    };
+    PostType: (search: string) => {
+        where: {
+            name: {
+                contains: string;
+            };
+        };
+    };
+}>;

package/dist/private/api.js

@@ -0,0 +1,10 @@
+import { useApiClient } from '../api/client.js';
+export const apiConfig = {
+    Tag: (search) => ({ where: { name: { contains: search } } }),
+    Post: (search) => ({
+        where: { tags: { some: { name: { contains: search } } } },
+        include: { tags: true }
+    }),
+    PostType: (search) => ({ where: { name: { contains: search } } })
+};
+export const api = useApiClient(apiConfig);

package/dist/private/constant.d.ts

@@ -0,0 +1,14 @@
+export declare const POST_PUBLICATION: {
+    private: {
+        label: string;
+        icon: string;
+    };
+    friends: {
+        label: string;
+        icon: string;
+    };
+    public: {
+        label: string;
+        icon: string;
+    };
+};

package/dist/private/constant.js

@@ -0,0 +1,6 @@
+import { mdiAccountGroup, mdiFileLockOutline, mdiWeb } from '@mdi/js';
+export const POST_PUBLICATION = {
+    private: { label: 'Private', icon: mdiFileLockOutline },
+    friends: { label: 'Friends', icon: mdiAccountGroup },
+    public: { label: 'Public', icon: mdiWeb }
+};

package/dist/private/model.d.ts

@@ -0,0 +1,78 @@
+export declare const modelPost: {
+    title: import("zod").ZodString;
+    content: import("zod").ZodString;
+    isFavourite: import("zod").ZodBoolean;
+    likeCount: import("zod").ZodNumber;
+    writingAt: import("zod").ZodDate;
+    writingDuration: import("zod").ZodDate;
+    isInteressing: import("zod").ZodOptional<import("zod").ZodBoolean>;
+    viewCounter: import("zod").ZodOptional<import("zod").ZodNumber>;
+    publishedAt: import("zod").ZodOptional<import("zod").ZodDate>;
+    publishedAtTime: import("zod").ZodOptional<import("zod").ZodDate>;
+    publication: import("zod").ZodEnum<["private", "friends", "public"]>;
+    type: import("zod").ZodEffects<import("zod").ZodObject<{
+        id: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>, {
+        connect: {
+            id: string;
+        };
+    }, {
+        id: string;
+    }>;
+    tags: import("zod").ZodEffects<import("zod").ZodArray<import("zod").ZodObject<{
+        id: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>, "many">, Partial<Record<"set" | "delete" | "connect" | "disconnect", {
+        id: string;
+    }[]>>, {
+        id: string;
+    }[]>;
+};
+export declare const modelPostUpdate: {
+    id: import("zod").ZodString;
+    tags: import("zod").ZodEffects<import("zod").ZodArray<import("zod").ZodObject<{
+        id: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>, "many">, Partial<Record<"set" | "delete" | "connect" | "disconnect", {
+        id: string;
+    }[]>>, {
+        id: string;
+    }[]>;
+    title: import("zod").ZodString;
+    content: import("zod").ZodString;
+    isFavourite: import("zod").ZodBoolean;
+    likeCount: import("zod").ZodNumber;
+    writingAt: import("zod").ZodDate;
+    writingDuration: import("zod").ZodDate;
+    isInteressing: import("zod").ZodOptional<import("zod").ZodBoolean>;
+    viewCounter: import("zod").ZodOptional<import("zod").ZodNumber>;
+    publishedAt: import("zod").ZodOptional<import("zod").ZodDate>;
+    publishedAtTime: import("zod").ZodOptional<import("zod").ZodDate>;
+    publication: import("zod").ZodEnum<["private", "friends", "public"]>;
+    type: import("zod").ZodEffects<import("zod").ZodObject<{
+        id: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>, {
+        connect: {
+            id: string;
+        };
+    }, {
+        id: string;
+    }>;
+};
+export declare const modelTag: {
+    name: import("zod").ZodString;
+};

package/dist/private/model.js

@@ -0,0 +1,25 @@
+import { toTuple, z } from '../validation/zod.js';
+import { POST_PUBLICATION } from './constant.js';
+export const modelPost = {
+    title: z.string().min(1, 'Required'),
+    content: z.string().min(10),
+    isFavourite: z.boolean(),
+    likeCount: z.number(),
+    writingAt: z.date(),
+    writingDuration: z.date(),
+    isInteressing: z.boolean().optional(),
+    viewCounter: z.number().optional(),
+    publishedAt: z.date().optional(),
+    publishedAtTime: z.date().optional(),
+    publication: z.enum(toTuple(POST_PUBLICATION)),
+    type: z.relation.connect,
+    tags: z.relations.connect
+};
+export const modelPostUpdate = {
+    ...modelPost,
+    id: z.string(),
+    tags: z.relations.set
+};
+export const modelTag = {
+    name: z.string().min(1, 'Required')
+};

package/dist/server/auth.js

@@ -1,7 +1,7 @@
 import { Lucia } from 'lucia';
 import { dev } from '$app/environment';
 import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
-import { prisma } from './prisma.js';
+import { prisma } from '../private/prisma.js';
 const adapter = new PrismaAdapter(prisma.session, prisma.user);
 export const lucia = new Lucia(adapter, {
     sessionCookie: {

package/dist/server/parseFormData.js

@@ -1,3 +1,5 @@
+import { USE_COERCE_BOOLEAN, USE_COERCE_DATE, USE_COERCE_JSON, USE_COERCE_NUMBER } from '../utils/constant.js';
+import { jsonParse } from '../utils/jsonParse.js';
 import z from 'zod';
 export async function parseFormData(requestOrFormData, shapes, validation) {
     const formData = requestOrFormData instanceof Request ? await requestOrFormData.formData() : requestOrFormData;
@@ -5,7 +7,8 @@ export async function parseFormData(requestOrFormData, shapes, validation) {
     const shema = z.object(firstShap).superRefine(validation || (() => { }));
     unionShaps.forEach((shap) => shema.or(z.object(shap)));
     const formDataFlateObject = Object.fromEntries(formData);
-    const formDataObject = flateToNeestedObject(formDataFlateObject);
+    const formDataFlateObjectCoerced = coerceFlateData(formDataFlateObject);
+    const formDataObject = flateToNeestedObject(formDataFlateObjectCoerced);
     const parsed = shema.safeParse(formDataObject);
     if (parsed.success === false) {
         const issueToPOJO = (issue) => ({
@@ -21,6 +24,23 @@ export async function parseFormData(requestOrFormData, shapes, validation) {
     }
     return { data: parsed.data, formData };
 }
+function coerceFlateData(flateData) {
+    const coerceMap = {
+        [USE_COERCE_JSON]: (value) => jsonParse(value, {}),
+        [USE_COERCE_DATE]: (value) => (value ? new Date(value) : undefined),
+        [USE_COERCE_NUMBER]: (value) => (value === '' || value === null ? null : +value),
+        [USE_COERCE_BOOLEAN]: (value) => value === 'true'
+    };
+    function coerceValue(value) {
+        if (typeof value !== 'string')
+            return value;
+        const coerce = Object.entries(coerceMap).find(([TOKEN]) => value.startsWith(TOKEN));
+        if (!coerce)
+            return value;
+        return coerce[1](value.replace(coerce[0], ''));
+    }
+    return Object.entries(flateData).reduce((acc, [key, value]) => ({ ...acc, [key]: coerceValue(value) }), {});
+}
 function flateToNeestedObject(flatObject) {
     const obj = {};
     Object.entries(flatObject).forEach(([key, value]) => {

package/dist/server/parseQuery.d.ts

@@ -1,11 +1,2 @@
-/// <reference types="@sveltejs/kit" />
 import type { ZodRawShape } from 'zod';
-export declare function parseQuery<Type extends ZodRawShape>(url: URL, shape: Type): {
-    err: import("@sveltejs/kit").ActionFailure<{
-        issues: import("zod").ZodIssue[];
-    }>;
-    data?: undefined;
-} | {
-    data: { [k_1 in keyof import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k] ? never : k; }[keyof Type]>]: import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k_2 in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k_2] ? never : k_2; }[keyof Type]>[k_1]; };
-    err?: undefined;
-};
+export declare function parseQuery<Type extends ZodRawShape>(url: URL, shape: Type): { [k_1 in keyof import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k] ? never : k; }[keyof Type]>]: import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k_2 in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k_2] ? never : k_2; }[keyof Type]>[k_1]; };

package/dist/server/parseQuery.js

@@ -1,4 +1,4 @@
-import { fail } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import { z } from '../validation/zod.js';
 export function parseQuery(url, shape) {
     const queryRaw = {};
@@ -8,8 +8,7 @@ export function parseQuery(url, shape) {
             queryRaw[name] = param;
     });
     const parsed = z.object(shape).safeParse(queryRaw);
-    if (parsed.success === false) {
-        return { err: fail(400, { issues: parsed.error.issues }) };
-    }
-    return { data: parsed.data };
+    if (parsed.success === false)
+        error(400, { message: parsed.error.message });
+    return parsed.data;
 }

package/dist/server/try.js

@@ -20,7 +20,6 @@ redirectTo) {
         }
         // Handle parseFormData error
         if ('issues' in error) {
-            console.log(error.issues);
             return fail(400, { issues: error.issues });
         }
         const { message } = error;

package/dist/ui/drawer/Drawer.svelte

@@ -8,19 +8,22 @@ import { subscibeDrawerLayers } from "./layers.js";
 import { contextContainer } from "../context.js";
 export let title = "";
 export let key;
-export let value = "1";
 let klass = "";
 export { klass as class };
 export let maxWidth = "32rem";
 export let classHeader = "";
 export let classBody = "";
-export function open() {
-  goto($urlParam.with({ [key]: value }), { replaceState: true, noScroll: true });
+export function open(value = 1, options = {}) {
+  return goto($urlParam.with({ [key]: value }), {
+    ...options,
+    replaceState: true,
+    noScroll: true
+  });
 }
-export function close() {
-  goto($urlParam.without(key), { replaceState: true, noScroll: true });
+export function close(options = {}) {
+  return goto($urlParam.without(key), { ...options, replaceState: true, noScroll: true });
 }
-const { offset, destroy, isActive } = subscibeDrawerLayers(key, value);
+const { offset, index, destroy, isActive } = subscibeDrawerLayers(key);
 onDestroy(destroy);
 contextContainer.set("drawer");
 </script>
@@ -28,15 +31,20 @@ contextContainer.set("drawer");
 {#if $isActive}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
-		on:click={close}
-		on:keyup={close}
+		on:click={() => close()}
+		on:keyup={() => close()}
 		transition:fade={{ duration: 200 }}
-		class="fixed inset-0 z-10 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
+		style="z-index: {10 + $index};"
+		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
 	/>
 
 	<aside
 		transition:fly|local={{ x: 500, duration: 200, opacity: 1 }}
-		style="max-width: min(100%, {maxWidth}); transform: translateX({-$offset * 4}rem);"
+		style="
+			z-index: {10 + $index};
+			max-width: min(100%, {maxWidth});
+			transform: translateX({-$offset * 4}rem);
+		"
 		class="{klass}
       fixed bottom-0 right-0 top-0 z-10 flex
 			w-full flex-col overflow-y-scroll bg-base-100
@@ -50,7 +58,7 @@ contextContainer.set("drawer");
 			"
 		>
 			<h2 class="title">{title}</h2>
-			<button on:click={close} class="btn btn-square btn-sm">
+			<button on:click={() => close()} class="btn btn-square btn-sm">
 				<Icon path={mdiClose} title="annuler" />
 			</button>
 		</div>

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -3,21 +3,44 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         /** Key used in url query params */ key: string;
-        /** Value need to match in url query params*/ value?: string | undefined;
         class?: string | undefined;
         maxWidth?: string | undefined;
         classHeader?: string | undefined;
         classBody?: string | undefined;
-        open?: (() => void) | undefined;
-        close?: (() => void) | undefined;
+        open?: ((value?: number, options?: {
+            replaceState?: boolean | undefined;
+            noScroll?: boolean | undefined;
+            keepFocus?: boolean | undefined;
+            invalidateAll?: boolean | undefined;
+            state?: App.PageState | undefined;
+        } | undefined) => Promise<void>) | undefined;
+        close?: ((options?: {
+            replaceState?: boolean | undefined;
+            noScroll?: boolean | undefined;
+            keepFocus?: boolean | undefined;
+            invalidateAll?: boolean | undefined;
+            state?: App.PageState | undefined;
+        } | undefined) => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            open: () => void;
-            close: () => void;
+            open: (value?: number, options?: {
+                replaceState?: boolean | undefined;
+                noScroll?: boolean | undefined;
+                keepFocus?: boolean | undefined;
+                invalidateAll?: boolean | undefined;
+                state?: App.PageState | undefined;
+            } | undefined) => Promise<void>;
+            close: (options?: {
+                replaceState?: boolean | undefined;
+                noScroll?: boolean | undefined;
+                keepFocus?: boolean | undefined;
+                invalidateAll?: boolean | undefined;
+                state?: App.PageState | undefined;
+            } | undefined) => Promise<void>;
         };
     };
 };
@@ -25,7 +48,19 @@ export type DrawerProps = typeof __propDef.props;
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
 export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
-    get open(): () => void;
-    get close(): () => void;
+    get open(): (value?: number, options?: {
+        replaceState?: boolean | undefined;
+        noScroll?: boolean | undefined;
+        keepFocus?: boolean | undefined;
+        invalidateAll?: boolean | undefined;
+        state?: App.PageState | undefined;
+    } | undefined) => Promise<void>;
+    get close(): (options?: {
+        replaceState?: boolean | undefined;
+        noScroll?: boolean | undefined;
+        keepFocus?: boolean | undefined;
+        invalidateAll?: boolean | undefined;
+        state?: App.PageState | undefined;
+    } | undefined) => Promise<void>;
 }
 export {};

package/dist/ui/drawer/layers.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="svelte" />
 import { type Readable } from 'svelte/store';
-export declare function subscibeDrawerLayers(key: string, value: string): {
+export declare function subscibeDrawerLayers(key: string): {
     isActive: Readable<boolean>;
+    index: Readable<number>;
     offset: Readable<number>;
     destroy(): void;
 };

package/dist/ui/drawer/layers.js

@@ -1,4 +1,4 @@
-import { derived, get, writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 const layers = writable([]);
@@ -9,10 +9,10 @@ const layersOffset = derived(layers, ($layers) => {
         return { ...acc, [layer]: drawerOffset };
     }, {});
 });
-export function subscibeDrawerLayers(key, value) {
+export function subscibeDrawerLayers(key) {
     const layerId = Math.random().toString().slice(2, 12);
     let isInitialized = false;
-    const isActive = derived(page, ({ url }) => url.searchParams.get(key) === value, false);
+    const isActive = derived(page, ({ url }) => url.searchParams.has(key), false);
     const isActiveUnsubscribe = isActive.subscribe(($isActive) => {
         if ($isActive)
             addLayer();
@@ -41,7 +41,8 @@ export function subscibeDrawerLayers(key, value) {
     }
     return {
         isActive,
-        offset: derived(layersOffset, (drawers) => drawers[layerId]),
+        index: derived(layers, ($layers) => $layers.indexOf(layerId)),
+        offset: derived(layersOffset, (offsets) => offsets[layerId]),
         destroy() {
             removeLayer();
             isActiveUnsubscribe();