rune-lab 0.0.6 → 0.0.8

package/README.md

@@ -1,7 +1,5 @@
-# <div align="center">
-
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/Yrrrrrf/rune-lab/main/static/rune.png" alt="Rune Lab Icon" width="128" height="128" description="Some rune that represents the Svelte rune system">
+  <img src="https://raw.githubusercontent.com/Yrrrrrf/rune-lab/main/static/rune.png" alt="Rune Lab Icon" width="128" height="128" description="Icon representing the Svelte Runes system">
   <div align="center">Rune Lab</div>
 </h1>
 
@@ -16,48 +14,61 @@
 
 ## Overview
 
-Rune Lab is a modern component library built with Svelte 5, focused on providing powerful,
-reactive UI components using Svelte's runes system. It offers a comprehensive set of components,
-theming capabilities, and utilities for building modern web applications.
+**Rune Lab** is your modern toolkit for crafting stunning, reactive web applications with
+**Svelte 5**. Harnessing the power of Svelte's new **Runes** system, Rune Lab offers a suite of
+elegant UI components designed for seamless data handling and beautiful theming.
+
+It's built to integrate effortlessly with your data sources, especially shining when connected
+to the [prism-py](https://github.com/Yrrrrrf/prism-py) and
+[prism-ts](https://github.com/Yrrrrrf/prism-ts) ecosystem for end-to-end type-safe API
+interactions.
+
+## Key Features
+
+- **✨ Svelte 5 Runes Core:** Experience fine-grained reactivity and cleaner component logic.
+- **🎨 Dynamic Theming:** Powered by DaisyUI & Tailwind CSS for extensive customization and
+  out-of-the-box themes.
+- **🔒 TypeScript First:** Robust type-safety for a confident and productive development
+  workflow.
+- **📊 Data-Aware Components:** Tools and components built to handle and visualize complex data.
+- **🛰️ Interactive Schema Explorer:** A standout feature! Visually explore and interact with
+  database schemas exposed by `prism-py` APIs directly within your Svelte application. Test CRUD
+  operations, execute functions, and understand your data structure like never before.
+- **🌐 Smart API Integration:** Includes `apiStore` (using `prism-ts`) for easy and type-safe
+  connection to backend APIs.
+- **📦 Lightweight Core:** Designed to be lean, with optional integrations.
+- **🦕 Universal Access:** Available on JSR (for Deno) and NPM (for Node.js/Bun/Yarn).
+
+## The Prism Ecosystem Advantage
+
+Rune Lab is designed to be a perfect companion to the Prism ecosystem:
 
-## Features
+- **[prism-py](https://github.com/Yrrrrrf/prism-py):** Automatically generates REST APIs from
+  your database schema.
+- **[prism-ts](https://github.com/Yrrrrrf/prism-ts):** A TypeScript client that consumes these
+  APIs with full type-safety.
 
-- **🧪 Svelte 5 Runes**: Built with Svelte 5's powerful reactivity primitives
-- **🎨 Theme System**: Extensive theming with DaisyUI integration
-- **🔄 Type Safety**: Full TypeScript support with strong typing
-- **📊 Data Visualization**: Components for visualizing complex data
-- **🌐 API Integration**: Tools for type-safe API interactions
-- **📦 Zero Dependencies**: Lightweight core with optional integrations
-- **🦕 Deno & NPM**: Available on both JSR and NPM
+When used together, Rune Lab's API integration tools (like the `apiStore` and
+`RLSchemaExplorer`) provide a remarkably streamlined and type-safe path from your backend data
+to your frontend UI.
 
 ## Installation
 
-### Using Deno / JSR
+### Using Deno / [JSR](https://jsr.io/@yrrrrrf/rune-lab)
 
 ```bash
 # Add to your Deno project
 deno add @yrrrrrf/rune-lab
 ```
 
-### Using NPM / Bun / Yarn
+### Using [NPM](https://www.npmjs.com/package/rune-lab) / Bun / Yarn
 
 ```bash
-# NPM
 npm install rune-lab
-
-# Bun
 bun add rune-lab
-
-# Yarn
 yarn add rune-lab
 ```
 
 ## License
 
 MIT License - See [LICENSE](LICENSE) for details.
-
----
-
-<div align="center">
-  Built with ❤️ using Svelte 5 and Deno
-</div>

package/dist/components/api/RLApiInterface.svelte

@@ -0,0 +1,52 @@
+<!-- src/lib/components/api/RLApiInterface.svelte -->
+<script lang="ts">
+    import type { ColumnMetadata } from '@yrrrrrf/prism-ts';
+    type APIOperation = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+    let {
+        schemaName,
+        resourceName,
+        resourceType,
+        columns,
+        onOpenModal // <-- ADDED THIS PROP
+    } = $props<{
+        schemaName: string;
+        resourceName: string;
+        resourceType: 'table' | 'view' | 'function'; // Added 'function' for future
+        columns: ColumnMetadata[]; // Still relevant for tables/views context
+        onOpenModal: (params: { operation: APIOperation }) => void; // <-- TYPE FOR THE PROP
+    }>();
+
+    function getAllowedOps(type: 'table' | 'view' | 'function'): APIOperation[] {
+        if (type === 'table') return ['GET', 'POST', 'PUT', 'DELETE'];
+        if (type === 'view') return ['GET'];
+        if (type === 'function') return ['POST']; // Typical for functions
+        return [];
+    }
+
+    const operationDetails: Record<APIOperation, { label: string, class: string }> = {
+        GET: { label: 'GET', class: 'btn-info' },
+        POST: { label: 'POST', class: 'btn-success' },
+        PUT: { label: 'PUT', class: 'btn-warning' },
+        DELETE: { label: 'DELETE', class: 'btn-error' },
+    };
+
+    function handleOperationClick(operation: APIOperation) {
+        onOpenModal({ operation });
+    }
+
+</script>
+
+<div class="flex flex-wrap gap-2 my-2">
+    {#each getAllowedOps(resourceType) as operation}
+        {@const detail = operationDetails[operation]}
+        {#if detail} <!-- Added a check in case an operation is not in details -->
+            <button
+                class="btn btn-sm {detail.class}"
+                onclick={() => handleOperationClick(operation)}
+            >
+                {detail.label}
+            </button>
+        {/if}
+    {/each}
+</div>

package/dist/components/api/RLApiInterface.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ColumnMetadata } from '@yrrrrrf/prism-ts';
+type APIOperation = 'GET' | 'POST' | 'PUT' | 'DELETE';
+type $$ComponentProps = {
+    schemaName: string;
+    resourceName: string;
+    resourceType: 'table' | 'view' | 'function';
+    columns: ColumnMetadata[];
+    onOpenModal: (params: {
+        operation: APIOperation;
+    }) => void;
+};
+declare const RlApiInterface: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlApiInterface = ReturnType<typeof RlApiInterface>;
+export default RlApiInterface;

package/dist/components/api/RLApiOperationModal.svelte

@@ -0,0 +1,190 @@
+<!-- src/lib/components/api/RLApiOperationModal.svelte -->
+<script lang="ts">
+    import type { ColumnMetadata, FunctionMetadata as PrismFunctionMetadata, CrudOperations } from '@yrrrrrf/prism-ts';
+    import { apiStore } from '../stores/api.svelte';
+    import RLResourceForm from '../form/RLResourceForm.svelte';
+    import RLFilterForm from '../form/RLFilterForm.svelte';
+    import RLFunctionForm from '../form/RLFunctionForm.svelte';
+
+    type APIOperation = 'GET' | 'POST' | 'PUT' | 'DELETE';
+    type ModalResourceType = 'table' | 'view' | 'function'; // Specific for modal context
+
+    let {
+        isOpen,
+        onClose,
+        schemaName,
+        resourceName,
+        operation,
+        columns = [], // Default to empty array if not a table/view
+        functionParams = null, // <-- ACCEPT THIS PROP
+        resourceType,
+        initialId = null,
+        initialDataForPut = {}
+    } = $props<{
+        isOpen: boolean;
+        onClose: () => void;
+        schemaName: string;
+        resourceName: string;
+        operation: APIOperation;
+        columns?: ColumnMetadata[]; // Optional as functions won't have it
+        functionParams?: PrismFunctionMetadata['parameters'] | null; // <-- TYPE FOR PROP
+        resourceType: ModalResourceType;
+        initialId?: string | number | null;
+        initialDataForPut?: Record<string, any>;
+    }>();
+
+    // ... (rest of your existing script block for RLApiOperationModal) ...
+    // No structural changes needed in the rest of the script for this specific error,
+    // as the logic for handling resourceType === 'function' and using functionParams
+    // was already present. The issue was just the prop declaration.
+    let loading = $state(false);
+    let error = $state<string | null>(null);
+    let apiResponse = $state<any>(null);
+    let crudOps = $state<CrudOperations<any> | null>(null);
+    let recordIdForAction = $state<string | number | undefined>(initialId ?? undefined);
+
+     let combinedInitialDataForPut = $derived({
+        ...initialDataForPut,
+        ...(recordIdForAction && columns && columns.find((c: ColumnMetadata) => c.isPrimaryKey) ? { [columns.find((c: ColumnMetadata) => c.isPrimaryKey)!.name]: recordIdForAction } : {})
+    });
+
+    $effect(() => {
+        async function initClient() {
+            if (isOpen && apiStore.IS_CONNECTED && apiStore.prism && schemaName && resourceName) {
+                if (resourceType === 'table' || resourceType === 'view') {
+                    crudOps = await apiStore.prism.getTableOperations(schemaName, resourceName);
+                } else {
+                    crudOps = null;
+                }
+            } else {
+                crudOps = null;
+            }
+             if (isOpen) {
+                recordIdForAction = initialId ?? undefined;
+                apiResponse = null;
+                error = null;
+            }
+        }
+        initClient();
+    });
+
+    async function handleFormSubmit(data: any) {
+        if (!apiStore.prism) {
+            error = "API client (Prism) not ready.";
+            return;
+        }
+        loading = true; error = null; apiResponse = null;
+        try {
+            let result;
+            if (resourceType === 'table' || resourceType === 'view') {
+                if (!crudOps) {
+                    error = "CRUD operations not initialized.";
+                    loading = false; return;
+                }
+                switch (operation) {
+                    case 'GET': result = await crudOps.findMany(data); break;
+                    case 'POST': result = await crudOps.create(data); break;
+                    case 'PUT':
+                        const pkColumnPut = columns?.find((c: ColumnMetadata) => c.isPrimaryKey); // Added optional chaining
+                        const idToUpdate = recordIdForAction ?? data[pkColumnPut?.name || 'id'];
+                        if (!idToUpdate) throw new Error("Primary key value is required for PUT.");
+                        const payloadPut = { ...data };
+                        if (pkColumnPut) delete payloadPut[pkColumnPut.name];
+                        result = await crudOps.update(idToUpdate, payloadPut);
+                        break;
+                    case 'DELETE':
+                        const pkColumnDelete = columns?.find((c: ColumnMetadata) => c.isPrimaryKey); // Added optional chaining
+                        const idToDelete = recordIdForAction ?? data[pkColumnDelete?.name || 'id'];
+                        if (!idToDelete) throw new Error("Primary key value is required for DELETE.");
+                        await crudOps.delete(idToDelete);
+                        result = { message: `Record ${idToDelete} deleted successfully.` };
+                        break;
+                }
+            } else if (resourceType === 'function') {
+                if (operation === 'POST') {
+                    result = await apiStore.prism.executeFunction(schemaName, resourceName, data);
+                } else {
+                    throw new Error(`Operation ${operation} not supported for functions via this modal.`);
+                }
+            }
+            apiResponse = result;
+            if (operation !== 'GET' || resourceType === 'function') {
+                setTimeout(() => onClose(), 1500);
+            }
+        } catch (e) {
+            console.error("API Operation Error:", e);
+            error = e instanceof Error ? e.message : String(e);
+        } finally {
+            loading = false;
+        }
+    }
+    let primaryKeyName = $derived(columns?.find((c: ColumnMetadata) => c.isPrimaryKey)?.name || 'id'); // Added optional chaining
+</script>
+
+{#if isOpen}
+    <dialog class="modal modal-open" open>
+        <div class="modal-box w-11/12 max-w-2xl">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onClose}>✕</button>
+            </form>
+            <h3 class="font-bold text-lg mb-4">
+                {operation}
+                <span class="badge badge-neutral badge-sm font-mono align-middle">{resourceType}</span>
+                <span class="font-mono badge badge-neutral align-middle">{schemaName}.{resourceName}</span>
+            </h3>
+
+            {#if error} <div role="alert" class="alert alert-error mb-4"> <!-- error display --> 
+                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                <span>Error: {error}</span>
+            </div> {/if}
+
+            {#if resourceType === 'function'}
+                {#if operation === 'POST' && functionParams}
+                    <RLFunctionForm params={functionParams} onSubmit={handleFormSubmit} {loading} />
+                {:else}
+                    <p class="text-error">Configuration error: Operation {operation} not set up for functions or parameters missing.</p>
+                {/if}
+            {:else if operation === 'GET'}
+                <RLFilterForm columns={columns || []} onSubmit={handleFormSubmit} {loading} />
+            {:else if operation === 'POST'}
+                <RLResourceForm columns={columns || []} {operation} onSubmit={handleFormSubmit} {loading} />
+            {:else if operation === 'PUT'}
+                {#if !initialId && resourceType !== 'function'}
+                    <div class="form-control mb-4">
+                        <label class="label" for="put-record-id"><span class="label-text">Record {primaryKeyName} to Update <span class="text-error">*</span></span></label>
+                        <input type="text" id="put-record-id" class="input input-bordered" bind:value={recordIdForAction} placeholder="Enter {primaryKeyName}" />
+                    </div>
+                {/if}
+                <RLResourceForm columns={columns || []} {operation} onSubmit={handleFormSubmit} {loading} initialData={combinedInitialDataForPut} />
+            {:else if operation === 'DELETE'}
+                 {#if !initialId && resourceType !== 'function'}
+                    <div class="form-control mb-4">
+                        <label class="label" for="delete-record-id"><span class="label-text">Record {primaryKeyName} to Delete <span class="text-error">*</span></span></label>
+                        <input type="text" id="delete-record-id" class="input input-bordered" bind:value={recordIdForAction} placeholder="Enter {primaryKeyName}" />
+                    </div>
+                {/if}
+                <p class="my-4">Are you sure you want to delete record with {primaryKeyName}: <strong class="font-mono">{recordIdForAction || ' (Enter ID above)'}</strong>?</p>
+                <div class="modal-action">
+                    <button class="btn" onclick={onClose}>Cancel</button>
+                    <button class="btn btn-error" onclick={() => handleFormSubmit({ [primaryKeyName]: recordIdForAction })} disabled={loading || !recordIdForAction}>
+                       {#if loading} <span class="loading loading-spinner loading-xs"></span> {/if} Confirm Delete
+                   </button>
+                </div>
+            {/if}
+
+            {#if apiResponse}
+                <div class="mt-6">
+                    <h4 class="font-semibold">API Response:</h4>
+                    <div class="mockup-code text-xs max-h-96 overflow-auto">
+                        <pre data-prefix=">"><code>{JSON.stringify(apiResponse, null, 2)}</code></pre>
+                    </div>
+                </div>
+            {/if}
+
+            {#if (operation !== 'DELETE' || resourceType === 'function' && operation === 'POST')} <!-- Simplified close button logic -->
+                <div class="modal-action mt-4"> <button class="btn" onclick={onClose}>Close</button> </div>
+            {/if}
+        </div>
+         <form method="dialog" class="modal-backdrop"> <button onclick={onClose}>close</button> </form>
+    </dialog>
+{/if}

package/dist/components/api/RLApiOperationModal.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ColumnMetadata, FunctionMetadata as PrismFunctionMetadata } from '@yrrrrrf/prism-ts';
+type APIOperation = 'GET' | 'POST' | 'PUT' | 'DELETE';
+type ModalResourceType = 'table' | 'view' | 'function';
+type $$ComponentProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    schemaName: string;
+    resourceName: string;
+    operation: APIOperation;
+    columns?: ColumnMetadata[];
+    functionParams?: PrismFunctionMetadata['parameters'] | null;
+    resourceType: ModalResourceType;
+    initialId?: string | number | null;
+    initialDataForPut?: Record<string, any>;
+};
+declare const RlApiOperationModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlApiOperationModal = ReturnType<typeof RlApiOperationModal>;
+export default RlApiOperationModal;

package/dist/components/dataview/RLMetadataTable.svelte

@@ -0,0 +1,137 @@
+<!-- src/lib/components/dataview/RLMetadataTable.svelte -->
+<script lang="ts">
+    import type { ColumnMetadata, ColumnReference, EnumMetadata } from '@yrrrrrf/prism-ts';
+        import { formatReferenceText } from '../../tools/form-helpers.js';
+
+    let {
+        title,
+        itemType,
+        columns,
+        enumsInSchema = {},
+        onFkClick, // Callback prop
+        onEnumClick, // Callback prop
+    } = $props<{
+        title: string;
+        itemType: 'table' | 'view';
+        columns: ColumnMetadata[];
+        enumsInSchema?: Record<string, EnumMetadata>;
+        onFkClick?: (ref: ColumnReference) => void; // Make optional if not always needed
+        onEnumClick?: (enumData: { name: string; values: string[] }) => void; // Make optional
+    }>();
+
+
+    function handleFkButtonClick(ref: ColumnReference | undefined) {
+        if (ref && onFkClick) {
+            onFkClick(ref);
+        }
+    }
+
+    function getEnumForColumn(column: ColumnMetadata): EnumMetadata | undefined {
+        if (!column.isEnum || !enumsInSchema || Object.keys(enumsInSchema).length === 0) {
+            return undefined;
+        }
+        
+        // Heuristic:
+        // 1. Exact match: column.name === enumMeta.name
+        // 2. Suffix match: enumMeta.name === `${column.name}_enum` (e.g., "status" -> "status_enum")
+        // 3. Prefix match: enumMeta.name === `${itemType}_${column.name}` (e.g., "enrollment_status" for table "enrollment", col "status")
+        // 4. More general: enumMeta.name includes column.name and "_enum" (e.g. "enrollment_status_enum" for "status")
+        // The prism-py output for enrollment.status shows "Enum(enrollment_status)".
+        // The actual enum name from `dt-schemas.json` (API response) for student schema is `status_enum`.
+        // If `column.name` is 'status' and `isEnum` is true, we need to find `status_enum`.
+
+        const colNameLower = column.name.toLowerCase();
+        for (const enumKey in enumsInSchema) {
+            const enumMeta = enumsInSchema[enumKey];
+            const enumNameLower = enumMeta.name.toLowerCase();
+
+            if (enumNameLower === colNameLower) return enumMeta; // Exact name match
+            if (enumNameLower === `${colNameLower}_enum`) return enumMeta; // status -> status_enum
+            if (enumNameLower === `${title.toLowerCase()}_${colNameLower}`) return enumMeta; // enrollment_status for table enrollment, column status
+            // Check if the enum name is specifically related to the column, common pattern is `table_column_enum` or `column_enum`
+             if (enumNameLower.includes(colNameLower) && enumNameLower.endsWith("_enum")) return enumMeta;
+
+
+        }
+        // If after specific checks nothing, try to find any enum that might be related by column name part
+        // This is very broad, use with caution or remove if too many false positives.
+        // for (const enumKey in enumsInSchema) {
+        //     if (enumsInSchema[enumKey].name.toLowerCase().includes(colNameLower)) {
+        //         return enumsInSchema[enumKey];
+        //     }
+        // }
+        return undefined;
+    }
+
+    function handleEnumBadgeClick(enumMeta: EnumMetadata | undefined) {
+        if (enumMeta && onEnumClick) {
+            onEnumClick({ name: enumMeta.name, values: enumMeta.values });
+        }
+    }
+
+</script>
+
+<div class="card bg-base-100 shadow-xl overflow-hidden">
+    <div class="card-body p-0">
+        {#if columns && columns.length > 0}
+            <div class="overflow-x-auto">
+                <table class="table table-sm w-full">
+                    <thead>
+                        <tr>
+                            <th class="w-2/5 pl-4">Column</th>
+                            <th class="w-3/5 pr-4">Details</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {#each columns as column (column.name)}
+                            {@const enumInfo = getEnumForColumn(column)}
+                            <tr class="hover">
+                                <td class="align-top py-2.5 pl-4">
+                                    <div class="flex items-baseline">
+                                        <span class="font-medium">{column.name}</span>
+                                        {#if !column.nullable}
+                                            <span class="text-error ml-1 select-none" title="Required field">*</span>
+                                        {/if}
+                                    </div>
+                                    <div class="font-mono text-xs text-base-content/60 italic mt-0.5">{column.type}</div>
+                                </td>
+                                <td class="align-top py-2.5 pr-4 space-x-1.5">
+                                    {#if column.isPrimaryKey}
+                                        <span class="badge badge-accent badge-sm font-semibold">PK</span>
+                                    {/if}
+                                    {#if column.references}
+                                        <span class="badge badge-secondary badge-sm">FK</span>
+                                        <button
+                                            class="link link-hover text-xs font-mono !text-info normal-case"
+                                            onclick={() => handleFkButtonClick(column.references)}
+                                            title="Navigate to {formatReferenceText(column.references)}"
+                                        >
+                                            {formatReferenceText(column.references)}
+                                        </button>
+                                    {/if}
+                                    {#if enumInfo}
+                                        <button
+                                            class="badge badge-warning badge-sm hover:shadow-md transition-shadow normal-case"
+                                            onclick={() => handleEnumBadgeClick(enumInfo)}
+                                            title="Enum: {enumInfo.name} (Click to see values)"
+                                        >
+                                            <span class="mr-1 opacity-70">Enum:</span>{enumInfo.name}
+                                        </button>
+                                    {:else if column.isEnum}
+                                         <span class="badge badge-ghost badge-sm normal-case" title="This column uses an enumerated type (details not auto-linked).">
+                                            <span class="opacity-70">Enum</span>
+                                        </span>
+                                    {/if}
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {:else}
+            <div class="p-6 text-center text-neutral-content/70">
+                No columns defined for this {itemType}.
+            </div>
+        {/if}
+    </div>
+</div>

package/dist/components/dataview/RLMetadataTable.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ColumnMetadata, ColumnReference, EnumMetadata } from '@yrrrrrf/prism-ts';
+type $$ComponentProps = {
+    title: string;
+    itemType: 'table' | 'view';
+    columns: ColumnMetadata[];
+    enumsInSchema?: Record<string, EnumMetadata>;
+    onFkClick?: (ref: ColumnReference) => void;
+    onEnumClick?: (enumData: {
+        name: string;
+        values: string[];
+    }) => void;
+};
+declare const RlMetadataTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlMetadataTable = ReturnType<typeof RlMetadataTable>;
+export default RlMetadataTable;