@morscherlab/mld-sdk 0.6.0

package/README.md

@@ -0,0 +1,326 @@
+# @morscherlab/mld-sdk (Frontend)
+
+Vue 3 SDK for MLD Platform plugin development. Provides reusable components, composables, stores, and types for building consistent, well-integrated plugins.
+
+> **Full Documentation:** See the [comprehensive docs](../../docs/index.md) for detailed API reference and guides.
+> - [API Reference](../../docs/frontend/api-reference.md)
+> - [Component Catalog](../../docs/frontend/components.md) - All 32 components with props/events
+> - [Composables Reference](../../docs/frontend/composables.md) - All 9 composables with examples
+> - [Theming Guide](../../docs/frontend/theming.md) - CSS variables and customization
+
+## Installation
+
+```bash
+npm install @estrellaxd/mld-sdk
+```
+
+## Requirements
+
+- Vue 3.4+
+- Pinia 2.1+
+- Tailwind CSS 4.0+ (optional - SDK includes pre-built utility classes)
+
+## Quick Start
+
+### 1. Import Styles
+
+Import the SDK styles in your main entry point:
+
+```typescript
+// main.ts
+import '@estrellaxd/mld-sdk/styles'
+```
+
+The SDK includes all necessary CSS utility classes pre-built, so **Tailwind CSS is optional**. The styles work standalone or alongside Tailwind.
+
+### 2. (Optional) Configure Tailwind
+
+If you're using Tailwind CSS and want to extend the MLD theme:
+
+```typescript
+import mldPreset from '@estrellaxd/mld-sdk/tailwind.preset'
+
+export default {
+  presets: [mldPreset],
+  content: [
+    './src/**/*.vue',
+    './node_modules/@estrellaxd/mld-sdk/**/*.vue',
+  ],
+}
+```
+
+### 3. Use Components
+
+```vue
+<script setup lang="ts">
+import { BaseButton, BaseInput, FormField } from '@estrellaxd/mld-sdk'
+import { useToast, useAuth } from '@estrellaxd/mld-sdk'
+import type { ButtonVariant } from '@estrellaxd/mld-sdk'
+
+const { success } = useToast()
+const { login } = useAuth()
+
+async function handleSubmit() {
+  const result = await login(username, password)
+  if (result) {
+    success('Login successful!')
+  }
+}
+</script>
+
+<template>
+  <FormField label="Username" required>
+    <BaseInput v-model="username" placeholder="Enter username" />
+  </FormField>
+
+  <BaseButton variant="primary" @click="handleSubmit">
+    Login
+  </BaseButton>
+</template>
+```
+
+## Components
+
+### Base Components
+- `BaseButton` - Button with variants (primary, secondary, cta, danger, success, ghost)
+- `BaseInput` - Text input with validation states
+- `BaseSelect` - Dropdown select with generic typing
+- `BaseTabs` - Tab navigation with underline/pills/bordered variants
+- `BaseModal` - Modal dialog with Teleport
+
+### Form Components
+- `FormField` - Form field wrapper with label, error, and hint
+
+### Feedback Components
+- `AlertBox` - Alert messages (success, error, warning, info)
+- `ToastNotification` - Toast notification container
+
+### Action Components
+- `IconButton` - Icon-only button with accessibility
+- `ThemeToggle` - Light/dark mode toggle
+
+### Layout Components
+- `CollapsibleCard` - Expandable card sections with optional icon badge and toggle switch
+- `AppTopBar` - Application header with slots
+- `AppSidebar` - Sidebar navigation
+
+### File & Data Components
+- `FileUploader` - Drag-and-drop file upload with file/folder mode support
+
+### Sample Management Components
+- `SampleSelector` - Hierarchical sample grouping with auto-group and CSV metadata import
+- `GroupingModal` - Modal for CSV-based metadata grouping
+- `GroupAssigner` - Drag-and-drop group assignment for comparisons (e.g., Control vs Treatment)
+
+## Composables
+
+### `useApi(options?)`
+Generic API client with auth interceptor.
+
+```typescript
+const api = useApi()
+
+// GET request
+const data = await api.get<User[]>('/users')
+
+// POST with body
+const created = await api.post<User>('/users', { name: 'John' })
+
+// File upload
+const result = await api.upload<UploadResponse>('/upload', file)
+
+// Build URLs for external use
+const downloadUrl = api.buildUrl('/files/123/download')
+```
+
+### `useAuth()`
+Authentication methods.
+
+```typescript
+const { login, logout, initializeAuth, getCurrentUser } = useAuth()
+
+// Initialize on app mount
+await initializeAuth()
+
+// Login
+const success = await login(username, password)
+
+// Get current user
+const user = await getCurrentUser()
+```
+
+### `usePasskey()`
+WebAuthn/FIDO2 passkey support.
+
+```typescript
+const { isSupported, registerPasskey, loginWithPasskey } = usePasskey()
+
+if (isSupported()) {
+  await registerPasskey('My Device')
+  // or
+  await loginWithPasskey()
+}
+```
+
+### `useTheme()`
+Theme switching.
+
+```typescript
+const { isDark, toggleTheme, setTheme } = useTheme()
+
+toggleTheme()
+setTheme(true) // dark mode
+```
+
+### `useToast()`
+Toast notification management.
+
+```typescript
+const { success, error, warning, info } = useToast()
+
+success('Operation completed!')
+error('Something went wrong')
+warning('Please review your input')
+info('New update available')
+```
+
+### `usePlatformContext()`
+Detect and interact with MLD Platform when running as a plugin.
+
+```typescript
+const { isIntegrated, plugin, user, navigate, notify } = usePlatformContext()
+
+if (isIntegrated.value) {
+  // Running under MLD Platform
+  console.log('Plugin:', plugin.value?.name)
+  notify('Hello from plugin!', 'info')
+}
+```
+
+## Stores
+
+### `useAuthStore`
+Pinia store for authentication state.
+
+```typescript
+const authStore = useAuthStore()
+
+// State
+authStore.token
+authStore.userInfo
+authStore.isAuthenticated
+authStore.isAdmin
+
+// Actions
+authStore.initialize()
+authStore.setToken(token, expiresIn)
+authStore.logout()
+```
+
+### `useSettingsStore`
+Pinia store for app settings.
+
+```typescript
+const settingsStore = useSettingsStore()
+
+// State
+settingsStore.theme // 'light' | 'dark' | 'system'
+settingsStore.colorPalette
+
+// Methods
+settingsStore.getApiBaseUrl()
+settingsStore.getWsBaseUrl()
+settingsStore.isDark()
+```
+
+## TypeScript Types
+
+All types are exported from `@estrellaxd/mld-sdk`:
+
+```typescript
+import type {
+  // Components
+  ButtonVariant,
+  ButtonSize,
+  ModalSize,
+  AlertType,
+  Toast,
+  TabItem,
+  SelectOption,
+
+  // Sample Management
+  SampleGroup,      // { name, color, samples[] }
+  GroupItem,        // { name, color, count }
+  FileUploaderMode, // 'file' | 'folder'
+
+  // Auth
+  AuthConfig,
+  UserInfo,
+  LoginResponse,
+
+  // Platform
+  PluginInfo,
+  PlatformContext,
+  ThemeMode,
+} from '@estrellaxd/mld-sdk'
+```
+
+## CSS Utility Classes
+
+The SDK provides ready-to-use CSS classes:
+
+### Buttons
+- `.btn-primary` - Blue primary button
+- `.btn-secondary` - Outlined/bordered button
+- `.btn-cta` - Orange call-to-action button
+- `.btn-success` - Green success button
+- `.btn-danger` - Red danger button
+
+### Inputs
+- `.input-modern` - Styled text input
+- `.select-modern` - Styled dropdown select
+- `.label-modern` - Uppercase label
+
+### Cards & Containers
+- `.card` - Card with border and shadow
+- `.card-hover` - Card with hover effect
+- `.floating-card` - Floating container pattern
+
+### Alerts
+- `.alert-success` - Green success alert
+- `.alert-error` - Red error alert
+- `.alert-warning` - Yellow warning alert
+- `.alert-info` - Blue info alert
+
+### Form Controls
+- `.toggle-switch` - Toggle switch
+- `.checkbox-modern` - Styled checkbox
+
+## Theming
+
+The SDK uses CSS variables for theming. Override them to customize:
+
+```css
+:root {
+  --bg-primary: #F8FAFC;
+  --bg-secondary: #FFFFFF;
+  --bg-tertiary: #F1F5F9;
+  --text-primary: #1E293B;
+  --text-secondary: #64748B;
+  --border-color: #E5E7EB;
+  --color-primary: #3B82F6;
+}
+
+html.dark {
+  --bg-primary: #0F172A;
+  --bg-secondary: #1E293B;
+  --bg-tertiary: #334155;
+  --text-primary: #F8FAFC;
+  --text-secondary: #94A3B8;
+  --border-color: #334155;
+}
+```
+
+## License
+
+MIT

package/dist/__tests__/components/AppLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/AppSidebar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/AppTopBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/BaseInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/BasePill.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/Calendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/CollapsibleCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/DataFrame.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/components/DropdownButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/composables/useAuth.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/composables/useForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AlertBox.vue.d.ts

@@ -0,0 +1,30 @@
+import { AlertType } from '../types';
+interface Props {
+    type?: AlertType;
+    title?: string;
+    dismissible?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dismiss: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {
+    type: AlertType;
+    dismissible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/AlertBox.vue.js

@@ -0,0 +1,125 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "mld-alert__icon mld-alert__icon--success",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "mld-alert__icon mld-alert__icon--error",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "mld-alert__icon mld-alert__icon--warning",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_4 = {
+  key: 3,
+  class: "mld-alert__icon mld-alert__icon--info",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_5 = { class: "mld-alert__content" };
+const _hoisted_6 = {
+  key: 0,
+  class: "mld-alert__title"
+};
+const _hoisted_7 = { class: "mld-alert__message" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AlertBox",
+  props: {
+    type: { default: "info" },
+    title: {},
+    dismissible: { type: Boolean, default: false }
+  },
+  emits: ["dismiss"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["mld-alert", `mld-alert--${props.type}`]),
+        role: "alert"
+      }, [
+        props.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[1] || (_cache[1] = [
+          createElementVNode("circle", {
+            cx: "12",
+            cy: "12",
+            r: "10"
+          }, null, -1),
+          createElementVNode("path", { d: "m9 12 2 2 4-4" }, null, -1)
+        ])])) : props.type === "error" ? (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[2] || (_cache[2] = [
+          createElementVNode("circle", {
+            cx: "12",
+            cy: "12",
+            r: "10"
+          }, null, -1),
+          createElementVNode("path", { d: "m15 9-6 6" }, null, -1),
+          createElementVNode("path", { d: "m9 9 6 6" }, null, -1)
+        ])])) : props.type === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[3] || (_cache[3] = [
+          createElementVNode("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }, null, -1),
+          createElementVNode("path", { d: "M12 9v4" }, null, -1),
+          createElementVNode("path", { d: "M12 17h.01" }, null, -1)
+        ])])) : (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[4] || (_cache[4] = [
+          createElementVNode("circle", {
+            cx: "12",
+            cy: "12",
+            r: "10"
+          }, null, -1),
+          createElementVNode("path", { d: "M12 16v-4" }, null, -1),
+          createElementVNode("path", { d: "M12 8h.01" }, null, -1)
+        ])])),
+        createElementVNode("div", _hoisted_5, [
+          props.title ? (openBlock(), createElementBlock("h4", _hoisted_6, toDisplayString(props.title), 1)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ]),
+        props.dismissible ? (openBlock(), createElementBlock("button", {
+          key: 4,
+          type: "button",
+          class: "mld-alert__dismiss",
+          "aria-label": "Dismiss",
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("dismiss"))
+        }, [..._cache[5] || (_cache[5] = [
+          createElementVNode("svg", {
+            class: "mld-alert__dismiss-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            createElementVNode("path", { d: "M18 6 6 18" }),
+            createElementVNode("path", { d: "m6 6 12 12" })
+          ], -1)
+        ])])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=AlertBox.vue.js.map

package/dist/components/AlertBox.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBox.vue.js","sources":["../../src/components/AlertBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AlertType } from '../types'\n\ninterface Props {\n  type?: AlertType\n  title?: string\n  dismissible?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  type: 'info',\n  dismissible: false,\n})\n\nconst emit = defineEmits<{\n  dismiss: []\n}>()\n</script>\n\n<template>\n  <div\n    class=\"mld-alert\"\n    :class=\"`mld-alert--${props.type}`\"\n    role=\"alert\"\n  >\n    <!-- Lucide circle-check -->\n    <svg v-if=\"props.type === 'success'\" class=\"mld-alert__icon mld-alert__icon--success\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m9 12 2 2 4-4\" />\n    </svg>\n    <!-- Lucide circle-x -->\n    <svg v-else-if=\"props.type === 'error'\" class=\"mld-alert__icon mld-alert__icon--error\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" />\n    </svg>\n    <!-- Lucide triangle-alert -->\n    <svg v-else-if=\"props.type === 'warning'\" class=\"mld-alert__icon mld-alert__icon--warning\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />\n    </svg>\n    <!-- Lucide info -->\n    <svg v-else class=\"mld-alert__icon mld-alert__icon--info\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" />\n    </svg>\n\n    <div class=\"mld-alert__content\">\n      <h4 v-if=\"props.title\" class=\"mld-alert__title\">\n        {{ props.title }}\n      </h4>\n      <div class=\"mld-alert__message\">\n        <slot />\n      </div>\n    </div>\n\n    <button\n      v-if=\"props.dismissible\"\n      type=\"button\"\n      class=\"mld-alert__dismiss\"\n      aria-label=\"Dismiss\"\n      @click=\"emit('dismiss')\"\n    >\n      <svg class=\"mld-alert__dismiss-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/alert-box.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAM,QAAQ;AAKd,UAAM,OAAO;;0BAMXA,mBA0CM,OAAA;AAAA,QAzCJ,OAAKC,eAAA,CAAC,aAAW,cACK,MAAM,IAAI,EAAA,CAAA;AAAA,QAChC,MAAK;AAAA,MAAA;QAGM,MAAM,SAAI,aAArBC,UAAA,GAAAF,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,UADJG,mBAAiC,UAAA;AAAA,YAAzB,IAAG;AAAA,YAAK,IAAG;AAAA,YAAK,GAAE;AAAA,UAAA;UAAOA,mBAA0B,QAAA,EAApB,GAAE,gBAAA,GAAe,MAAA,EAAA;AAAA,QAAA,QAG1C,MAAM,SAAI,WAA1BD,aAAAF,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,UADJG,mBAAiC,UAAA;AAAA,YAAzB,IAAG;AAAA,YAAK,IAAG;AAAA,YAAK,GAAE;AAAA,UAAA;UAAOA,mBAAsB,QAAA,EAAhB,GAAE,YAAA,GAAW,MAAA,EAAA;AAAA,UAAGA,mBAAqB,QAAA,EAAf,GAAE,WAAA,GAAU,MAAA,EAAA;AAAA,QAAA,QAG3D,MAAM,SAAI,aAA1BD,aAAAF,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,UADJG,mBAAqF,QAAA,EAA/E,GAAE,2EAAA,GAA0E,MAAA,EAAA;AAAA,UAAGA,mBAAoB,QAAA,EAAd,GAAE,UAAA,GAAS,MAAA,EAAA;AAAA,UAAGA,mBAAuB,QAAA,EAAjB,GAAE,aAAA,GAAY,MAAA,EAAA;AAAA,QAAA,SAG/HD,aAAAF,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,UADJG,mBAAiC,UAAA;AAAA,YAAzB,IAAG;AAAA,YAAK,IAAG;AAAA,YAAK,GAAE;AAAA,UAAA;UAAOA,mBAAsB,QAAA,EAAhB,GAAE,YAAA,GAAW,MAAA,EAAA;AAAA,UAAGA,mBAAsB,QAAA,EAAhB,GAAE,YAAA,GAAW,MAAA,EAAA;AAAA,QAAA;QAG5EA,mBAOM,OAPN,YAOM;AAAA,UANM,MAAM,SAAhBD,UAAA,GAAAF,mBAEK,MAFL,YAEKI,gBADA,MAAM,KAAK,GAAA,CAAA;UAEhBD,mBAEM,OAFN,YAEM;AAAA,YADJE,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;QAKJ,MAAM,4BADdL,mBAUS,UAAA;AAAA;UARP,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACV,+CAAO,KAAI,SAAA;AAAA,QAAA;UAEZG,mBAEM,OAAA;AAAA,YAFD,OAAM;AAAA,YAA0B,SAAQ;AAAA,YAAY,MAAK;AAAA,YAAO,QAAO;AAAA,YAAe,gBAAa;AAAA,YAAI,kBAAe;AAAA,YAAQ,mBAAgB;AAAA,UAAA;YACjJA,mBAAuB,QAAA,EAAjB,GAAE,cAAY;AAAA,YAAGA,mBAAuB,QAAA,EAAjB,GAAE,cAAY;AAAA,UAAA;;;;;;"}

package/dist/components/AlertBox.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./AlertBox.vue.js";
+/* empty css              */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=AlertBox.vue3.js.map

package/dist/components/AlertBox.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBox.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/AppContainer.vue.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    /** Makes the container scrollable (overflow-y: auto). Ignored when direction is set. */
+    scrollable?: boolean;
+    /** Renders as a transparent flex container instead of a card. */
+    direction?: 'row' | 'column';
+    /** Flex gap between children. Only applies when direction is set. */
+    gap?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    scrollable: boolean;
+    gap: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/AppContainer.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppContainer",
+  props: {
+    scrollable: { type: Boolean, default: false },
+    direction: {},
+    gap: { default: "1rem" }
+  },
+  setup(__props) {
+    const props = __props;
+    const isLayout = computed(() => !!props.direction);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "mld-container",
+          isLayout.value ? ["mld-container--layout", __props.direction === "row" ? "mld-container--row" : "mld-container--column"] : ["mld-container--card", __props.scrollable ? "mld-container--scrollable" : ""]
+        ]),
+        style: normalizeStyle(isLayout.value ? { gap: __props.gap } : void 0)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=AppContainer.vue.js.map

package/dist/components/AppContainer.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContainer.vue.js","sources":["../../src/components/AppContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\ninterface Props {\n  /** Makes the container scrollable (overflow-y: auto). Ignored when direction is set. */\n  scrollable?: boolean\n  /** Renders as a transparent flex container instead of a card. */\n  direction?: 'row' | 'column'\n  /** Flex gap between children. Only applies when direction is set. */\n  gap?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  scrollable: false,\n  gap: '1rem',\n})\n\nconst isLayout = computed(() => !!props.direction)\n</script>\n\n<template>\n  <div\n    class=\"mld-container\"\n    :class=\"\n      isLayout\n        ? ['mld-container--layout', direction === 'row' ? 'mld-container--row' : 'mld-container--column']\n        : ['mld-container--card', scrollable ? 'mld-container--scrollable' : '']\n    \"\n    :style=\"isLayout ? { gap } : undefined\"\n  >\n    <slot />\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeStyle","_renderSlot"],"mappings":";;;;;;;;;AAYA,UAAM,QAAQ;AAKd,UAAM,WAAW,SAAS,MAAM,CAAC,CAAC,MAAM,SAAS;;0BAI/CA,mBAUM,OAAA;AAAA,QATJ;UAAM;AAAA,UACS,SAAA,kCAA6C,QAAA,cAAS,QAAA,uBAAA,uBAAA,4BAA+F,QAAA,aAAU,8BAAA,EAAA;AAAA,QAAA;QAK7K,OAAKC,eAAE,SAAA,QAAQ,EAAA,KAAK,QAAA,IAAA,IAAQ,MAAS;AAAA,MAAA;QAEtCC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/components/AppContainer.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./AppContainer.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=AppContainer.vue2.js.map

package/dist/components/AppContainer.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContainer.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/AppLayout.vue.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    /** Position of sidebar (left or right side of screen) */
+    sidebarPosition?: 'left' | 'right';
+    /** Width of sidebar (use 'auto' to fit content) */
+    sidebarWidth?: string;
+    /** When true, topbar/sidebar/main render as floating cards with gaps */
+    floating?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        topbar?(_: {}): any;
+        sidebar?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    floating: boolean;
+    sidebarPosition: "left" | "right";
+    sidebarWidth: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};