@baklavue/mcp 1.0.0

package/dist/docs/components/textarea.md

@@ -0,0 +1,190 @@
+# Textarea
+
+A Vue UI kit component for Baklava's `bl-textarea` component with v-model support. Supports label, placeholder, validation, character counter, help text, and more.
+
+## Basic Usage
+
+Use `v-model` for two-way binding with `label` and `placeholder` props.
+
+<div class="component-demo">
+
+<TextareaBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvTextarea
+    v-model="message"
+    label="Message"
+    placeholder="Enter your message"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTextarea } from "@baklavue/ui";
+
+const message = ref("");
+</script>
+```
+
+## Rows and Maxlength
+
+Control the visible rows and maximum character length.
+
+```vue
+<template>
+  <BvTextarea
+    v-model="text"
+    label="Description"
+    :rows="6"
+    :maxlength="500"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTextarea } from "@baklavue/ui";
+
+const text = ref("");
+</script>
+```
+
+## With Validation
+
+Use `required`, `helpText`, and `invalidText` for validation feedback.
+
+<div class="component-demo">
+
+<TextareaValidationDemo />
+
+</div>
+
+```vue
+<template>
+  <BvTextarea
+    v-model="comment"
+    label="Comment"
+    placeholder="Enter your comment"
+    :maxlength="200"
+    help-text="Maximum 200 characters"
+    :required="true"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTextarea } from "@baklavue/ui";
+
+const comment = ref("");
+</script>
+```
+
+## Disabled and Readonly
+
+Disable or make the textarea readonly.
+
+```vue
+<template>
+  <BvTextarea v-model="text" label="Disabled" :disabled="true" />
+  <BvTextarea v-model="text" label="Readonly" :readonly="true" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTextarea } from "@baklavue/ui";
+
+const text = ref("Cannot edit");
+</script>
+```
+
+## Character Counter
+
+Enable the character counter with `characterCounter`.
+
+```vue
+<template>
+  <BvTextarea
+    v-model="bio"
+    label="Bio"
+    :maxlength="300"
+    :character-counter="true"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTextarea } from "@baklavue/ui";
+
+const bio = ref("");
+</script>
+```
+
+## Props
+
+| Prop                | Type             | Default     | Description                          |
+| ------------------- | ---------------- | ----------- | ------------------------------------ |
+| `modelValue`        | `string \| null` | `undefined` | Textarea value (v-model)             |
+| `label`             | `string`         | `undefined` | Label text                           |
+| `placeholder`       | `string`         | `undefined` | Placeholder text                     |
+| `rows`              | `number`        | `undefined` | Number of visible rows               |
+| `maxlength`         | `number`        | `undefined` | Maximum character length             |
+| `minlength`         | `number`        | `undefined` | Minimum character length             |
+| `disabled`          | `boolean`       | `undefined` | Disabled state                       |
+| `required`          | `boolean`       | `undefined` | Required field                       |
+| `readonly`          | `boolean`       | `undefined` | Readonly state                       |
+| `helpText`          | `string`        | `undefined` | Help text below the textarea         |
+| `invalidText`       | `string`        | `undefined` | Custom error/invalid message         |
+| `characterCounter`  | `boolean`       | `undefined` | Enable character counter             |
+| `expand`            | `boolean`       | `undefined` | Enable auto-expand up to maxRows     |
+| `maxRows`           | `number`        | `undefined` | Max rows when expand is true         |
+| `size`              | `TextareaSize`  | `undefined` | Textarea size: small, medium, large  |
+| `name`              | `string`        | `undefined` | Name attribute for forms             |
+
+## Events
+
+| Event               | Payload         | Description                            |
+| ------------------- | --------------- | -------------------------------------- |
+| `update:modelValue` | `string \| null`| Emitted when value changes (v-model)   |
+| `input`            | `CustomEvent`   | Emitted on user input                  |
+| `change`           | `CustomEvent`   | Emitted when value commits (blur)      |
+
+## Slots
+
+| Slot      | Description                |
+| --------- | -------------------------- |
+| `default` | Additional content/slots   |
+
+## Types
+
+```typescript
+import type { TextareaProps, TextareaSize } from "@baklavue/ui";
+
+type TextareaSize = "small" | "medium" | "large";
+
+interface TextareaProps {
+  modelValue?: string | null;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  maxlength?: number;
+  minlength?: number;
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  helpText?: string;
+  invalidText?: string;
+  characterCounter?: boolean;
+  expand?: boolean;
+  maxRows?: number;
+  size?: TextareaSize;
+  name?: string;
+}
+```
+
+## Usage Notes
+
+- **v-model**: Use `v-model` for two-way binding of the textarea value.
+- **Validation**: Use `invalidText` to display custom error messages when validation fails.
+- **Character counter**: Enable `characterCounter` with `maxlength` to show character count.

package/dist/docs/components/tooltip.md

@@ -0,0 +1,155 @@
+# Tooltip
+
+A Vue UI kit component for Baklava's `bl-tooltip` component for displaying contextual information on hover or focus. The trigger is provided via the default slot; content can be set via the `content` prop or the `#content` slot.
+
+## Basic Usage
+
+Wrap a trigger element and set the tooltip text with the `content` prop.
+
+<div class="component-demo">
+
+<TooltipBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvTooltip content="This is a tooltip">
+    <BvButton>Hover me</BvButton>
+  </BvTooltip>
+</template>
+
+<script setup>
+import { BvTooltip, BvButton } from "@baklavue/ui";
+</script>
+```
+
+## Placement
+
+Control where the tooltip appears with the `placement` prop.
+
+<div class="component-demo">
+
+<TooltipPlacementDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap">
+    <BvTooltip content="Tooltip on top" placement="top">
+      <BvButton>Top</BvButton>
+    </BvTooltip>
+    <BvTooltip content="Tooltip on bottom" placement="bottom">
+      <BvButton>Bottom</BvButton>
+    </BvTooltip>
+    <BvTooltip content="Tooltip on left" placement="left">
+      <BvButton>Left</BvButton>
+    </BvTooltip>
+    <BvTooltip content="Tooltip on right" placement="right">
+      <BvButton>Right</BvButton>
+    </BvTooltip>
+  </div>
+</template>
+
+<script setup>
+import { BvTooltip, BvButton } from "@baklavue/ui";
+</script>
+```
+
+## Custom Content Slot
+
+Use the `#content` slot for rich or dynamic tooltip content.
+
+```vue
+<template>
+  <BvTooltip>
+    <template #content>
+      <div style="padding: 0.5rem">
+        <strong>Custom content</strong>
+        <p>You can add HTML or components here.</p>
+      </div>
+    </template>
+    <span>Hover for custom content</span>
+  </BvTooltip>
+</template>
+
+<script setup>
+import { BvTooltip } from "@baklavue/ui";
+</script>
+```
+
+## Disabled
+
+Disable the tooltip to prevent it from showing.
+
+```vue
+<template>
+  <BvTooltip content="This won't show" :disabled="true">
+    <BvButton>Disabled tooltip</BvButton>
+  </BvTooltip>
+</template>
+
+<script setup>
+import { BvTooltip, BvButton } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop        | Type               | Default     | Description                              |
+| ----------- | ------------------ | ----------- | ---------------------------------------- |
+| `content`   | `string`           | `undefined` | Tooltip content text                     |
+| `placement` | `TooltipPlacement` | `undefined` | Placement: top, bottom, left, right, etc. |
+| `trigger`   | `string`           | `undefined` | Trigger type: hover, click, etc.         |
+| `disabled`  | `boolean`          | `undefined` | Disabled state                           |
+| `delay`     | `number`           | `undefined` | Delay before showing (ms)                 |
+
+## Events
+
+| Event  | Payload | Description                    |
+| ------- | ------- | ------------------------------ |
+| `show`  | -       | Emitted when tooltip is shown  |
+| `hide`  | -       | Emitted when tooltip is hidden |
+
+## Slots
+
+| Slot      | Description                         |
+| --------- | ----------------------------------- |
+| `default` | Trigger element (hover/focus target) |
+| `content` | Custom tooltip content (overrides `content` prop) |
+
+## Types
+
+```typescript
+import type { TooltipProps, TooltipPlacement } from "@baklavue/ui";
+
+type TooltipPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+
+interface TooltipProps {
+  content?: string;
+  placement?: TooltipPlacement;
+  trigger?: string;
+  disabled?: boolean;
+  delay?: number;
+}
+```
+
+## Usage Notes
+
+- **Trigger**: The default slot content is the element that triggers the tooltip on hover or focus.
+- **Content**: Use the `content` prop for simple text, or the `#content` slot for custom markup.
+- **Placement**: Default is `top`. Use `placement` to control position relative to the trigger.
+- **Accessibility**: The component follows Baklava's accessibility guidelines; tooltips are announced to screen readers.

package/dist/docs/composables/alert.md

@@ -0,0 +1,87 @@
+# useAlert
+
+A composable for programmatic show/hide of inline BvAlert. Use with `v-if="isVisible"` or `:closed="!isVisible"` on BvAlert.
+
+## Basic Usage
+
+```vue
+<template>
+  <div>
+    <BvButton @click="showSuccess">Show success</BvButton>
+    <BvAlert
+      v-if="isVisible"
+      :variant="variant"
+      :caption="caption"
+      :description="description"
+      :closable="closable"
+      @close="hide"
+    />
+  </div>
+</template>
+
+<script setup>
+import { BvButton, BvAlert } from "@baklavue/ui";
+import { useAlert } from "@baklavue/composables";
+
+const { isVisible, variant, caption, description, closable, show, hide } = useAlert();
+
+const showSuccess = () => {
+  show({
+    variant: "success",
+    caption: "Saved",
+    description: "Your changes have been saved.",
+    closable: true,
+  });
+};
+</script>
+```
+
+## With Closable
+
+```vue
+<script setup>
+import { useAlert } from "@baklavue/composables";
+
+const { isVisible, variant, caption, description, closable, show, hide } = useAlert();
+
+show({
+  variant: "warning",
+  description: "Please fix the errors before submitting.",
+  closable: true,
+});
+</script>
+```
+
+## API
+
+### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `isVisible` | `Ref<boolean>` | Whether alert is visible |
+| `variant` | `Ref<AlertVariant>` | info, success, warning, danger |
+| `caption` | `Ref<string>` | Alert title |
+| `description` | `Ref<string>` | Alert message |
+| `closable` | `Ref<boolean>` | Whether close button is shown |
+| `show` | `(options?) => void` | Show alert with options |
+| `hide` | `() => void` | Hide alert |
+
+### Options
+
+```typescript
+interface UseAlertOptions {
+  variant?: "info" | "success" | "warning" | "danger";
+  caption?: string;
+  description?: string;
+  closable?: boolean;
+}
+```
+
+## TypeScript Support
+
+```typescript
+import { useAlert, type UseAlertOptions, type AlertVariant } from "@baklavue/composables";
+
+const { show } = useAlert();
+show({ variant: "success", description: "Done!" });
+```

package/dist/docs/composables/asyncState.md

@@ -0,0 +1,74 @@
+# useAsyncState
+
+A composable for generic async state (loading, error, data) without fetch. Complements `useFetch`/`useQuery` for non-HTTP async operations like IndexedDB, Web Worker, or custom logic.
+
+## Basic Usage
+
+```vue
+<script setup>
+import { useAsyncState } from "@baklavue/composables";
+
+const { state, execute, isLoading, error } = useAsyncState(async () => {
+  const data = await readFromIndexedDB();
+  return data;
+});
+
+await execute();
+</script>
+```
+
+## Lazy with Immediate
+
+```vue
+<script setup>
+import { useAsyncState } from "@baklavue/composables";
+
+const { state, execute, isLoading } = useAsyncState(() => fetchUser(userId), {
+  immediate: true,
+  initialData: null,
+});
+</script>
+```
+
+## With Callbacks
+
+```vue
+<script setup>
+import { useAsyncState, useNotification } from "@baklavue/composables";
+
+const { success, error } = useNotification();
+const { state, execute } = useAsyncState(() => loadData(), {
+  onSuccess: () => success({ description: "Loaded!" }),
+  onError: (err) => error({ description: err.message }),
+});
+</script>
+```
+
+## API
+
+### Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `immediate` | `boolean` | `false` | Execute immediately on mount |
+| `initialData` | `T` | `undefined` | Initial data value |
+| `onSuccess` | `(data: T) => void` | — | Callback on success |
+| `onError` | `(error: Error) => void` | — | Callback on error |
+
+### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `state` | `ShallowRef<T \| undefined>` | The resolved data |
+| `execute` | `() => Promise<T>` | Run the async function |
+| `isLoading` | `Ref<boolean>` | True while executing |
+| `error` | `Ref<Error \| null>` | Last error if any |
+
+## TypeScript Support
+
+```typescript
+import { useAsyncState, type UseAsyncStateOptions } from "@baklavue/composables";
+
+const { state, execute } = useAsyncState<User>(() => fetchUser(id));
+// state: ShallowRef<User | undefined>
+```

package/dist/docs/composables/base64.md

@@ -0,0 +1,72 @@
+# useBase64
+
+A composable for converting Blob/File/ArrayBuffer/canvas/image to Base64 data URLs. Complements `useFile` for image preview before upload, avatar uploads, and thumbnails.
+
+## Basic Usage
+
+```vue
+<template>
+  <input type="file" accept="image/*" @change="handleFile" />
+  <img v-if="base64" :src="base64" alt="Preview" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useBase64 } from "@baklavue/composables";
+
+const file = ref<File | undefined>();
+const { base64 } = useBase64(file);
+
+const handleFile = (e: Event) => {
+  file.value = (e.target as HTMLInputElement).files?.[0];
+};
+</script>
+```
+
+## With Canvas
+
+```vue
+<script setup>
+import { useBase64 } from "@baklavue/composables";
+
+const canvasRef = ref<HTMLCanvasElement>();
+const { base64, execute } = useBase64(canvasRef, {
+  type: "image/jpeg",
+  quality: 0.8,
+});
+
+await execute();
+</script>
+```
+
+## API
+
+### Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `dataUrl` | `boolean` | `true` | Output as Data URL format (e.g. `data:image/png;base64,...`) |
+| `type` | `string` | `"image/png"` | MIME type for canvas/image |
+| `quality` | `number` | — | Image quality for jpeg or webp (0-1) |
+
+### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `base64` | `ShallowRef<string>` | Base64 string (or data URL when `dataUrl: true`) |
+| `execute` | `() => Promise<string>` | Manually trigger conversion |
+| `promise` | `ShallowRef<Promise<string>>` | Current conversion promise |
+
+### Supported Sources
+
+- `string` | `Blob` | `File` | `ArrayBuffer`
+- `HTMLCanvasElement` | `HTMLImageElement`
+
+## TypeScript Support
+
+```typescript
+import { useBase64, type UseBase64Options } from "@baklavue/composables";
+
+const { base64 } = useBase64(fileRef);
+const { base64: canvasBase64 } = useBase64(canvasRef, { type: "image/jpeg" });
+```

package/dist/docs/composables/breakpoints.md

@@ -0,0 +1,129 @@
+# useBreakpoints / useMediaQuery
+
+Composables for responsive breakpoints. Use `useBreakpoints` for predefined mobile/tablet/desktop flags, or `useMediaQuery` for custom media queries.
+
+## useBreakpoints
+
+Reactively detects viewport size. Useful for switching layouts (e.g. Drawer vs Dialog on mobile).
+
+```vue
+<template>
+  <component :is="useDrawer ? BvDrawer : BvDialog" v-model:open="isOpen">
+    <p>Content</p>
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { BvDrawer, BvDialog } from "@baklavue/ui";
+import { useBreakpoints, useDisclosure } from "@baklavue/composables";
+
+const { isMobile, isTablet, isDesktop } = useBreakpoints();
+const { isOpen } = useDisclosure();
+
+const useDrawer = computed(() => isMobile.value);
+</script>
+```
+
+## Custom Breakpoints
+
+```vue
+<script setup>
+import { useBreakpoints } from "@baklavue/composables";
+
+const { isMobile, isTablet, isDesktop } = useBreakpoints({
+  mobile: 640,   // < 640px = mobile
+  tablet: 1280,  // 640-1279 = tablet, >= 1280 = desktop
+});
+</script>
+```
+
+## useMediaQuery
+
+For a single media query:
+
+```vue
+<template>
+  <div v-if="matches">Visible on small screens only</div>
+</template>
+
+<script setup>
+import { useMediaQuery } from "@baklavue/composables";
+
+const matches = useMediaQuery("(max-width: 768px)");
+</script>
+```
+
+## API
+
+### useBreakpoints
+
+#### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `isMobile` | `Ref<boolean>` | Viewport < mobile breakpoint |
+| `isTablet` | `Ref<boolean>` | Viewport between mobile and tablet |
+| `isDesktop` | `Ref<boolean>` | Viewport >= tablet breakpoint |
+
+#### Options
+
+```typescript
+interface BreakpointOptions {
+  mobile?: number;  // Default: 768 (px)
+  tablet?: number;  // Default: 1024 (px)
+}
+```
+
+Default breakpoints:
+- Mobile: < 768px
+- Tablet: 768px - 1023px
+- Desktop: >= 1024px
+
+### useMediaQuery
+
+#### Parameters
+
+- `query` — Media query string (e.g. `"(max-width: 768px)"`)
+
+#### Return Value
+
+- `Ref<boolean>` — `true` when the query matches
+
+## useWindowSize {#use-window-size}
+
+Reactive viewport width and height. Useful for layout calculations and charts that need actual dimensions.
+
+```vue
+<template>
+  <p>Viewport: {{ width }} × {{ height }}</p>
+</template>
+
+<script setup>
+import { useWindowSize } from "@baklavue/composables";
+
+const { width, height } = useWindowSize();
+</script>
+```
+
+#### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `width` | `Ref<number>` | Window inner width |
+| `height` | `Ref<number>` | Window inner height |
+
+## TypeScript Support
+
+```typescript
+import {
+  useBreakpoints,
+  useMediaQuery,
+  useWindowSize,
+  type BreakpointOptions,
+} from "@baklavue/composables";
+
+const { isMobile } = useBreakpoints({ mobile: 640 });
+const darkMode = useMediaQuery("(prefers-color-scheme: dark)");
+const { width, height } = useWindowSize();
+```