rune-lab 0.0.7 → 0.0.9

package/README.md

@@ -1,5 +1,5 @@
 <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>
 
@@ -14,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.
 
-## Features
+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.
 
-- **🧪 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
+## 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:
+
+- **[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.
+
+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

@@ -1,46 +1,52 @@
 <!-- src/lib/components/api/RLApiInterface.svelte -->
 <script lang="ts">
-    import type { ColumnMetadata } from '@yrrrrrf/prism-ts';
-    type APIOperation = 'GET' | 'POST' | 'PUT' | 'DELETE';
+    import type { ColumnMetadata as PrismColumnMetadata } from '@yrrrrrf/prism-ts';
+    // Import RLApiInterfaceActionParams from YOUR definition in the explorer store
+    import type { RLApiInterfaceActionParams } from '../stores/explorer.svelte.ts';
+
+    // For convenience within this component, you can extract the operation type.
+    // This is NOT redefining it; it's creating a local alias to a part of an imported type.
+    type LocalAPIOperation = RLApiInterfaceActionParams['operation'];
 
     let {
         schemaName,
         resourceName,
         resourceType,
         columns,
-        onOpenModal // <-- ADDED THIS PROP
+        onOpenModal
     } = $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
+        resourceType: 'table' | 'view' | 'function';
+        columns: PrismColumnMetadata[]; // This prop is fine if it's what the component receives
+        onOpenModal: (params: RLApiInterfaceActionParams) => void; // Uses your imported interface
     }>();
 
-    function getAllowedOps(type: 'table' | 'view' | 'function'): APIOperation[] {
+    // Use the local alias or RLApiInterfaceActionParams['operation']
+    function getAllowedOps(type: 'table' | 'view' | 'function'): LocalAPIOperation[] {
         if (type === 'table') return ['GET', 'POST', 'PUT', 'DELETE'];
         if (type === 'view') return ['GET'];
-        if (type === 'function') return ['POST']; // Typical for functions
+        if (type === 'function') return ['POST'];
         return [];
     }
 
-    const operationDetails: Record<APIOperation, { label: string, class: string }> = {
+    const operationDetails: Record<LocalAPIOperation, { 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) {
+    function handleOperationClick(operation: LocalAPIOperation) {
+        // Construct the object that matches RLApiInterfaceActionParams
         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 -->
+        {#if detail}
             <button
                 class="btn btn-sm {detail.class}"
                 onclick={() => handleOperationClick(operation)}

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

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

package/dist/components/common/RLPripertyTable.svelte

@@ -0,0 +1,107 @@
+<!-- src/lib/components/common/RLPropertyTable.svelte (example structure) -->
+<script lang="ts">
+    import type { RLEnumMetadata, RLColumnReference } from '../stores/explorer.svelte';
+
+    export interface RLPropertyItem {
+        name: string;
+        type?: string;
+        nullable?: boolean;
+        isPrimaryKey?: boolean;
+        references?: RLColumnReference;
+        isEnum?: boolean;
+        mode?: string; // For function params
+        hasDefault?: boolean;
+        defaultValue?: string | null;
+        // Any other properties needed to render details
+        _rawItem?: any; // Optional: pass the original item if needed by slot
+    }
+
+    let {
+        items,
+        title = '',
+        nameHeader = "Name",
+        detailHeader = "Details",
+        enumsInSchema, // Pass this if needed for enum badge clicks from here
+        onFkClick,
+        onEnumClick,
+    } = $props<{
+        items: RLPropertyItem[];
+        title?: string;
+        nameHeader?: string;
+        detailHeader?: string;
+        enumsInSchema?: Record<string, RLEnumMetadata>; // For resolving enum names if items only have partial enum info
+        onFkClick?: (ref: RLColumnReference) => void;
+        onEnumClick?: (enumData: RLEnumMetadata) => void;
+    }>();
+</script>
+
+<div class="card bg-base-100 shadow-sm overflow-hidden my-2">
+    {#if title}
+        <div class="card-title p-3 text-sm font-semibold bg-base-200/50">{title}</div>
+    {/if}
+    <div class="card-body p-0">
+        {#if items && items.length > 0}
+            <div class="overflow-x-auto">
+                <table class="table table-sm w-full">
+                    <thead>
+                        <tr>
+                            <th class="w-2/5 pl-4">{nameHeader}</th>
+                            {#if detailHeader} <th class="w-3/5 pr-4">{detailHeader}</th> {/if}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {#each items as item (item.name)}
+                            <tr class="hover">
+                                <td class="align-top py-2 pl-4">
+                                    <div class="flex items-baseline">
+                                        <span class="font-medium">{item.name}</span>
+                                        {#if item.nullable === false && item.type && !item.type.toLowerCase().includes('bool')} <!-- Nullability for non-booleans -->
+                                            <span class="text-error ml-1 select-none" title="Required field">*</span>
+                                        {/if}
+                                    </div>
+                                    {#if item.type && detailHeader} <!-- Only show type if details are shown and type exists -->
+                                        <div class="font-mono text-xs text-base-content/60 italic mt-0.5">{item.type}</div>
+                                    {/if}
+                                </td>
+                                {#if detailHeader}
+                                <td class="align-top py-2 pr-4 space-x-1.5">
+                                    {#if $$slots.detail}
+                                        <slot name="detail" itemData={item}></slot>
+                                    {:else}
+                                        <!-- Default detail rendering -->
+                                        {#if item.isPrimaryKey} <span class="badge badge-accent badge-xs font-semibold">PK</span> {/if}
+                                        {#if item.references}
+                                            <span class="badge badge-secondary badge-xs">FK</span>
+                                            <button class="link link-hover text-xs font-mono !text-info normal-case"
+                                                onclick={() => onFkClick && onFkClick(item.references!)}
+                                                title="Navigate to {item.references.schema}.{item.references.table}.{item.references.column}">
+                                                {item.references.schema}.{item.references.table}.{item.references.column}
+                                            </button>
+                                        {/if}
+                                        {#if item.isEnum && enumsInSchema && enumsInSchema[item.name + '_enum'] /* Crude example of finding enum */}
+                                            {@const enumMeta = enumsInSchema[item.name + '_enum']}
+                                             <button class="badge badge-warning badge-xs hover:shadow-md transition-shadow normal-case"
+                                                onclick={() => onEnumClick && onEnumClick(enumMeta)}
+                                                title="Enum: {enumMeta.name}">
+                                                <span class="mr-1 opacity-70">Enum:</span>{enumMeta.name}
+                                            </button>
+                                        {:else if item.isEnum}
+                                            <span class="badge badge-ghost badge-xs">Enum</span>
+                                        {/if}
+                                        {#if item.mode} <span class="badge badge-info badge-xs">{item.mode}</span> {/if}
+                                        {#if item.hasDefault} <span class="badge badge-outline badge-xs" title="Default: {item.defaultValue}">Has Default</span> {/if}
+                                    {/if}
+                                </td>
+                                {/if}
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {:else}
+            <div class="p-4 text-center text-neutral-content/70">
+                No items to display.
+            </div>
+        {/if}
+    </div>
+</div>

package/dist/components/common/RLPripertyTable.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { RLEnumMetadata, RLColumnReference } from '../stores/explorer.svelte';
+export interface RLPropertyItem {
+    name: string;
+    type?: string;
+    nullable?: boolean;
+    isPrimaryKey?: boolean;
+    references?: RLColumnReference;
+    isEnum?: boolean;
+    mode?: string;
+    hasDefault?: boolean;
+    defaultValue?: string | null;
+    _rawItem?: any;
+}
+type $$ComponentProps = {
+    items: RLPropertyItem[];
+    title?: string;
+    nameHeader?: string;
+    detailHeader?: string;
+    enumsInSchema?: Record<string, RLEnumMetadata>;
+    onFkClick?: (ref: RLColumnReference) => void;
+    onEnumClick?: (enumData: RLEnumMetadata) => void;
+};
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RlPripertyTable: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    detail: {
+        itemData: unknown;
+    };
+}, {}, "">;
+type RlPripertyTable = InstanceType<typeof RlPripertyTable>;
+export default RlPripertyTable;

package/dist/components/dataview/RLDetailRow.svelte

@@ -0,0 +1,61 @@
+<!-- src/lib/components/dataview/RLDetailRow.svelte -->
+<script lang="ts">
+    // No specific types needed from explorer.ts for these direct props.
+    // This component is highly generic.
+
+    type DetailAction = {
+        text: string;
+        class?: string;
+        onClick?: (event: MouseEvent) => void;
+        title?: string; // For tooltip on the badge/button
+        isLink?: boolean; // To render as a link-styled button
+    };
+
+    let {
+        name,
+        typeInfo = undefined,
+        details = [],
+        required = false,
+        description = undefined,
+        nameClass = 'font-medium',
+        typeInfoClass = 'font-mono text-xs text-base-content/60 italic mt-0.5',
+        containerClass = 'flex justify-between items-baseline py-1.5 hover:bg-base-content/5 px-1 rounded group',
+    } = $props<{
+        name: string;
+        typeInfo?: string;
+        details?: DetailAction[];
+        required?: boolean;
+        description?: string;
+        nameClass?: string;
+        typeInfoClass?: string;
+        containerClass?: string;
+    }>();
+</script>
+
+<div class="{containerClass}" title={description}>
+    <div class="flex-grow overflow-hidden pr-2">
+        <span class="{nameClass}">{name}</span>
+        {#if required}
+            <span class="text-error ml-1 select-none" title="Required field">*</span>
+        {/if}
+        {#if typeInfo}
+            <div class="{typeInfoClass} truncate" title={typeInfo}>{typeInfo}</div>
+        {/if}
+    </div>
+    {#if details.length > 0}
+        <div class="flex-shrink-0 space-x-1.5 flex items-center">
+            {#each details as detailItem}
+                <button
+                    class="badge badge-sm whitespace-nowrap {detailItem.class || 'badge-ghost'} 
+                           {detailItem.isLink ? 'link link-hover !text-info normal-case font-mono' : ''}
+                           disabled:opacity-50"
+                    onclick={detailItem.onClick}
+                    title={detailItem.title || detailItem.text}
+                    disabled={!detailItem.onClick && !detailItem.isLink}
+                >
+                    {@html detailItem.text} <!-- Use @html if text might contain simple entities like → -->
+                </button>
+            {/each}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,20 @@
+type DetailAction = {
+    text: string;
+    class?: string;
+    onClick?: (event: MouseEvent) => void;
+    title?: string;
+    isLink?: boolean;
+};
+type $$ComponentProps = {
+    name: string;
+    typeInfo?: string;
+    details?: DetailAction[];
+    required?: boolean;
+    description?: string;
+    nameClass?: string;
+    typeInfoClass?: string;
+    containerClass?: string;
+};
+declare const RlDetailRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlDetailRow = ReturnType<typeof RlDetailRow>;
+export default RlDetailRow;

package/dist/components/dataview/RLMetadataList.svelte

@@ -0,0 +1,53 @@
+<!-- src/lib/components/dataview/RLMetadataList.svelte -->
+<script lang="ts">
+    import RLDetailRow from './RLDetailRow.svelte';
+
+    type DetailActionForList = { // Prop structure for items passed to RLDetailRow
+        text: string;
+        class?: string;
+        onClick?: (event: MouseEvent) => void;
+        title?: string;
+        isLink?: boolean;
+    };
+
+    export interface RLMetadataListItem {
+        name: string;
+        typeInfo?: string;
+        details?: DetailActionForList[];
+        required?: boolean;
+        description?: string;
+    }
+
+    let {
+        title = undefined,
+        items = [],
+        listClass = 'divide-y divide-base-300/50',
+        emptyText = 'None.',
+    } = $props<{
+        title?: string;
+        items: RLMetadataListItem[];
+        listClass?: string;
+        emptyText?: string;
+    }>();
+</script>
+
+<div>
+    {#if title}
+        <h4 class="font-semibold text-sm mb-1 mt-2 opacity-80">{title}</h4>
+    {/if}
+    {#if items.length > 0}
+        <div class="{listClass} border-t border-b border-base-300/30 -mx-1">
+            {#each items as item (item.name) }
+                <RLDetailRow
+                    name={item.name}
+                    typeInfo={item.typeInfo}
+                    details={item.details}
+                    required={item.required}
+                    description={item.description}
+                />
+            {/each}
+        </div>
+    {:else}
+        <p class="text-xs text-base-content/50 italic py-1.5 px-1">{emptyText}</p>
+    {/if}
+</div>

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

@@ -0,0 +1,23 @@
+type DetailActionForList = {
+    text: string;
+    class?: string;
+    onClick?: (event: MouseEvent) => void;
+    title?: string;
+    isLink?: boolean;
+};
+export interface RLMetadataListItem {
+    name: string;
+    typeInfo?: string;
+    details?: DetailActionForList[];
+    required?: boolean;
+    description?: string;
+}
+type $$ComponentProps = {
+    title?: string;
+    items: RLMetadataListItem[];
+    listClass?: string;
+    emptyText?: string;
+};
+declare const RlMetadataList: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlMetadataList = ReturnType<typeof RlMetadataList>;
+export default RlMetadataList;

package/dist/components/dataview/RLMetadataTable.svelte

@@ -1,6 +1,7 @@
 <!-- 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,
@@ -18,10 +19,6 @@
         onEnumClick?: (enumData: { name: string; values: string[] }) => void; // Make optional
     }>();
 
-    function formatReferenceText(ref: ColumnReference | undefined): string {
-        if (!ref) return '';
-        return `${ref.schema}.${ref.table}.${ref.column}`;
-    }
 
     function handleFkButtonClick(ref: ColumnReference | undefined) {
         if (ref && onFkClick) {

package/dist/components/explorer/RLEnumDisplay.svelte

@@ -0,0 +1,34 @@
+<!-- src/lib/components/explorer/RLEnumDisplay.svelte -->
+<script lang="ts">
+    import type { RLEnumMetadata } from '../stores/explorer.svelte';
+    import RLMetadataList from '../dataview/RLMetadataList.svelte'; // Adjust path as needed
+
+    let {
+        enumData,
+        // Optional: if RLEnumDisplay should have its own modal button.
+        // Otherwise, RLSchemaExplorer can handle showing the modal if needed via context.
+        // For simplicity, let's assume any modal action is handled by the parent (RLSchemaExplorer).
+    } = $props<{
+        enumData: RLEnumMetadata;
+    }>();
+
+    let enumValueItems = $derived(
+        enumData.values.map((value: string) => ({
+            name: value,
+        }))
+    );
+</script>
+
+<div class="py-2">
+    <RLMetadataList items={enumValueItems} title="Values" emptyText="No values defined for this enum." />
+    <!-- 
+        If RLSchemaExplorer needs a way to open its existing enum modal from here,
+        you could add a button and an on:click event that bubbles up or calls a prop function.
+        Example:
+        <div class="mt-2">
+            <button class="btn btn-xs btn-outline" on:click>
+                Show in Modal (if needed)
+            </button>
+        </div>
+    -->
+</div>

package/dist/components/explorer/RLEnumDisplay.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RLEnumMetadata } from '../stores/explorer.svelte';
+type $$ComponentProps = {
+    enumData: RLEnumMetadata;
+};
+declare const RlEnumDisplay: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlEnumDisplay = ReturnType<typeof RlEnumDisplay>;
+export default RlEnumDisplay;

package/dist/components/explorer/RLFunctionDisplay.svelte

@@ -0,0 +1,64 @@
+<!-- src/lib/components/explorer/RLFunctionDisplay.svelte -->
+<script lang="ts">
+    import type { RLApiInterfaceActionParams, RLFunctionMetadata, RLFunctionParameter } from '../stores/explorer.svelte';
+
+    import RLDetailRow from '../dataview/RLDetailRow.svelte';
+    import RLMetadataList from '../dataview/RLMetadataList.svelte';
+    import type { RLMetadataListItem } from '../dataview/RLMetadataList.svelte';
+    import RLApiInterface from '../api/RLApiInterface.svelte'; // For execution
+
+    let {
+        func,
+        onOpenApiModal, // Callback to RLSchemaExplorer
+    } = $props<{
+        func: RLFunctionMetadata;
+        onOpenApiModal: (params: RLApiInterfaceActionParams & { schemaName: string, resourceName: string, resourceType: 'function', options: any }) => void;
+    }>();
+
+    let parameterItems = $derived(
+        func.parameters.map((param: RLFunctionParameter): RLMetadataListItem => ({
+            name: param.name,
+            typeInfo: param.type + (param.defaultValue ? ` (default: ${param.defaultValue})` : ''),
+            required: !param.hasDefault && param.mode === 'IN', // Only IN params can be "required" in a form sense
+            details: [{ text: param.mode, class: `badge-${param.mode === 'IN' ? 'info' : param.mode === 'OUT' ? 'success' : 'warning'}` }],
+        }))
+    );
+</script>
+
+<div class="space-y-3 py-2">
+    {#if func.description}
+        <RLDetailRow name="Description" typeInfo={func.description} nameClass="font-semibold opacity-80" typeInfoClass="italic text-sm" />
+    {/if}
+
+    <RLDetailRow name="Kind" typeInfo={func.kind} nameClass="font-semibold opacity-80" />
+    <RLDetailRow name="Return Type" typeInfo={func.returnType || 'void'} nameClass="font-semibold opacity-80" />
+    <RLDetailRow name="Is Strict" typeInfo={func.isStrict ? 'Yes' : 'No'} nameClass="font-semibold opacity-80" />
+
+    {#if func.kind === 'TRIGGER' && func.triggerData}
+        <RLMetadataList title="Trigger Details" items={[
+            { name: 'Timing', typeInfo: func.triggerData.timing },
+            { name: 'Events', typeInfo: func.triggerData.events.join(', ') },
+            { name: 'Target', typeInfo: `${func.triggerData.targetTableSchema}.${func.triggerData.targetTableName}` },
+        ]} />
+    {/if}
+
+    <RLMetadataList items={parameterItems} title="Parameters" emptyText="No parameters." />
+
+    {#if (func.kind === 'FUNCTION' || func.kind === 'PROCEDURE') && onOpenApiModal}
+        <div class="mt-4 pt-3 border-t border-base-300/30">
+             <RLApiInterface
+                schemaName={func.schema}
+                resourceName={func.name}
+                resourceType={'function'} 
+                columns={[]}
+                onOpenModal={(opParams) => onOpenApiModal({
+                    ...opParams, 
+                    schemaName: func.schema, 
+                    resourceName: func.name, 
+                    resourceType: 'function', 
+                    options: { functionParams: func.parameters } // Passing RLFunctionParameter[]
+                })}
+            />
+        </div>
+    {/if}
+</div>

package/dist/components/explorer/RLFunctionDisplay.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { RLApiInterfaceActionParams, RLFunctionMetadata } from '../stores/explorer.svelte';
+type $$ComponentProps = {
+    func: RLFunctionMetadata;
+    onOpenApiModal: (params: RLApiInterfaceActionParams & {
+        schemaName: string;
+        resourceName: string;
+        resourceType: 'function';
+        options: any;
+    }) => void;
+};
+declare const RlFunctionDisplay: import("svelte").Component<$$ComponentProps, {}, "">;
+type RlFunctionDisplay = ReturnType<typeof RlFunctionDisplay>;
+export default RlFunctionDisplay;