includio-cms 0.1.4 → 0.5.1

package/dist/admin/utils/formatDate.d.ts

@@ -1,4 +1,5 @@
 import type { InterfaceLanguage } from '../../types/languages.js';
 export declare function toLocaleCode(lang: string): string;
 export declare function formatRelativeDate(date: Date | string, lang?: InterfaceLanguage): string;
+export declare function formatShortDate(date: Date | string, lang?: InterfaceLanguage): string;
 export declare function formatAbsoluteDate(date: Date | string, lang?: InterfaceLanguage): string;

package/dist/admin/utils/formatDate.js

@@ -86,6 +86,14 @@ export function formatRelativeDate(date, lang = 'en') {
     }
     return labels[lang].justNow;
 }
+export function formatShortDate(date, lang = 'en') {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleDateString(toLocaleCode(lang), {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+}
 export function formatAbsoluteDate(date, lang = 'en') {
     const d = typeof date === 'string' ? new Date(date) : date;
     return d.toLocaleString(toLocaleCode(lang), {

package/dist/admin/utils/roleLabel.d.ts

@@ -0,0 +1,2 @@
+import type { InterfaceLanguage } from '../../types/languages.js';
+export declare function getRoleLabel(role: string, lang: InterfaceLanguage): string;

package/dist/admin/utils/roleLabel.js

@@ -0,0 +1,13 @@
+const roleLabels = {
+    pl: {
+        admin: 'Administrator',
+        user: 'Użytkownik'
+    },
+    en: {
+        admin: 'Administrator',
+        user: 'User'
+    }
+};
+export function getRoleLabel(role, lang) {
+    return roleLabels[lang]?.[role] ?? role;
+}

package/dist/admin/utils/translationStatus.d.ts

@@ -0,0 +1,17 @@
+import type { Field } from '../../types/fields.js';
+export type TranslationCompleteness = 'complete' | 'partial' | 'empty';
+export interface LangStatus {
+    filled: number;
+    total: number;
+    percentage: number;
+    status: TranslationCompleteness;
+    missingFields: {
+        slug: string;
+        label: string;
+    }[];
+}
+/**
+ * Compute translation status for each language.
+ * Checks all localized fields (text, richtext, content) + seo/url sub-fields.
+ */
+export declare function computeTranslationStatus(data: Record<string, unknown>, fields: Field[], languages: string[]): Record<string, LangStatus>;

package/dist/admin/utils/translationStatus.js

@@ -0,0 +1,134 @@
+import { getAtPath } from './objectPath.js';
+/** Extract a label string from Localized, preferring pl then en then slug. */
+function extractLabel(label, fallback) {
+    if (!label)
+        return fallback;
+    if (typeof label === 'string')
+        return label;
+    return label.pl || label.en || fallback;
+}
+/** Check if a value counts as "filled" for a given field type. */
+function isFieldFilled(value, fieldType) {
+    if (value == null)
+        return false;
+    switch (fieldType) {
+        case 'text':
+        case 'richtext':
+            return typeof value === 'string' && value.length > 0;
+        case 'content': {
+            if (typeof value !== 'object')
+                return false;
+            const doc = value;
+            return doc.type === 'doc' && Array.isArray(doc.content) && doc.content.length > 0;
+        }
+        case 'seo': {
+            if (typeof value !== 'object')
+                return false;
+            const seo = value;
+            // At least title or description filled
+            return ((typeof seo.title === 'string' && seo.title.length > 0) ||
+                (typeof seo.description === 'string' && seo.description.length > 0));
+        }
+        case 'url': {
+            if (typeof value !== 'object')
+                return false;
+            const url = value;
+            return typeof url.url === 'string' && url.url.length > 0;
+        }
+        default:
+            return false;
+    }
+}
+/** Collect all localized fields from a field list, including nested seo/url sub-fields. */
+function collectLocalizedFields(fields) {
+    const result = [];
+    for (const field of fields) {
+        if (field.localized === false)
+            continue;
+        const label = extractLabel(field.label, field.slug);
+        if (field.type === 'text' || field.type === 'richtext' || field.type === 'content') {
+            result.push({ slug: field.slug, label, type: field.type, required: !!field.required });
+        }
+    }
+    // SEO and URL fields are always localized by nature (sub-fields are lang-keyed)
+    for (const field of fields) {
+        if (field.type === 'seo') {
+            const label = extractLabel(field.label, field.slug);
+            result.push({ slug: field.slug, label, type: 'seo', required: !!field.required });
+        }
+        if (field.type === 'url') {
+            const label = extractLabel(field.label, field.slug);
+            result.push({ slug: field.slug, label, type: 'url', required: !!field.required });
+        }
+    }
+    return result;
+}
+/** Resolve the value of a field for a given language. */
+function resolveFieldValue(data, field, lang) {
+    if (field.type === 'seo') {
+        const seoData = getAtPath(data, field.slug);
+        if (seoData && typeof seoData === 'object') {
+            const seo = seoData;
+            const title = extractLangValue(seo.title, lang);
+            const desc = extractLangValue(seo.description, lang);
+            return { title, description: desc };
+        }
+        return undefined;
+    }
+    else if (field.type === 'url') {
+        const urlData = getAtPath(data, field.slug);
+        if (urlData && typeof urlData === 'object') {
+            const url = urlData;
+            const urlVal = url.url && typeof url.url === 'object'
+                ? url.url[lang]
+                : undefined;
+            return { url: urlVal || '' };
+        }
+        return undefined;
+    }
+    else {
+        const fieldData = getAtPath(data, field.slug);
+        if (fieldData && typeof fieldData === 'object' && !Array.isArray(fieldData)) {
+            return fieldData[lang];
+        }
+        return undefined;
+    }
+}
+/**
+ * Compute translation status for each language.
+ * Checks all localized fields (text, richtext, content) + seo/url sub-fields.
+ */
+export function computeTranslationStatus(data, fields, languages) {
+    const allLocalizedFields = collectLocalizedFields(fields);
+    // Pre-filter: keep field if required OR has content in at least one language
+    const localizedFields = allLocalizedFields.filter((field) => field.required ||
+        languages.some((lang) => isFieldFilled(resolveFieldValue(data, field, lang), field.type)));
+    const result = {};
+    for (const lang of languages) {
+        let filled = 0;
+        const total = localizedFields.length;
+        const missingFields = [];
+        for (const field of localizedFields) {
+            const value = resolveFieldValue(data, field, lang);
+            if (isFieldFilled(value, field.type)) {
+                filled++;
+            }
+            else {
+                missingFields.push({ slug: field.slug, label: field.label });
+            }
+        }
+        const percentage = total === 0 ? 100 : Math.round((filled / total) * 100);
+        const status = percentage === 100 ? 'complete' : percentage === 0 ? 'empty' : 'partial';
+        result[lang] = { filled, total, percentage, status, missingFields };
+    }
+    return result;
+}
+/** Extract lang value from a possibly lang-keyed value. */
+function extractLangValue(value, lang) {
+    if (typeof value === 'string')
+        return value;
+    if (value && typeof value === 'object') {
+        return (value[lang]) || '';
+    }
+    return '';
+}

package/dist/ai-claude/index.d.ts

@@ -0,0 +1,2 @@
+import type { AIAdapter, AIConfig } from '../types/adapters/ai.js';
+export declare function claudeAdapter(config: AIConfig): AIAdapter;

package/dist/ai-claude/index.js

@@ -0,0 +1,56 @@
+import { getCMS } from '../core/cms.js';
+import Anthropic from '@anthropic-ai/sdk';
+import sharp from 'sharp';
+export function claudeAdapter(config) {
+    const client = new Anthropic({
+        apiKey: config.apiKey
+    });
+    return {
+        generateAltText: async (fileId) => {
+            const mediaFile = await getCMS().databaseAdapter.getMediaFile({
+                data: {
+                    id: fileId
+                }
+            });
+            if (!mediaFile) {
+                throw new Error('Media file not found in database');
+            }
+            const file = await getCMS().filesAdapter.downloadFile(mediaFile.url.split('/').pop() || '');
+            if (!file) {
+                throw new Error('File not found');
+            }
+            const fileBuffer = Buffer.from(await file.arrayBuffer());
+            const pngBuffer = await sharp(fileBuffer).png().toBuffer();
+            const imageBase64 = pngBuffer.toString('base64');
+            const prompt = `Generate a concise and descriptive alt text for the following image file in polish language. The alt text should accurately describe the content and context of the image, be no longer than 125 characters, and avoid using phrases like "image of" or "picture of". Return only the alt text, nothing else.`;
+            const message = await client.messages.create({
+                model: 'claude-haiku-4-5-20251001',
+                max_tokens: 256,
+                messages: [
+                    {
+                        role: 'user',
+                        content: [
+                            {
+                                type: 'text',
+                                text: prompt
+                            },
+                            {
+                                type: 'image',
+                                source: {
+                                    type: 'base64',
+                                    media_type: 'image/png',
+                                    data: imageBase64
+                                }
+                            }
+                        ]
+                    }
+                ]
+            });
+            const textBlock = message.content.find((block) => block.type === 'text');
+            if (!textBlock || textBlock.type !== 'text') {
+                throw new Error('AI response did not contain text');
+            }
+            return textBlock.text.trim();
+        }
+    };
+}

package/dist/cms/runtime/api.d.ts

@@ -1,4 +1,4 @@
-import type { SingleEntryMap, SingleSlug, CollectionEntryMap, CollectionSlug, SiteLanguage } from './types';
+import type { SingleEntryMap, SingleSlug, CollectionEntryMap, CollectionSlug, FormEntryMap, SiteLanguage } from './types';
 interface GetEntryQueryOptions<T extends {
     data: Record<string, unknown>;
 }> {
@@ -15,4 +15,9 @@ interface GetEntryOptions {
 export declare function getSingleEntry<K extends SingleSlug>(slug: K, data: GetEntryQueryOptions<SingleEntryMap[K]>, options: GetEntryOptions): Promise<SingleEntryMap[K] | null>;
 export declare function getCollectionEntry<K extends CollectionSlug>(slug: K, data: GetEntryQueryOptions<CollectionEntryMap[K]>, options: GetEntryOptions): Promise<CollectionEntryMap[K] | null>;
 export declare function getCollectionEntries<K extends CollectionSlug>(slug: K, options: GetEntryOptions): Promise<CollectionEntryMap[K][]>;
+export interface SubmitFormOptions {
+    ip?: string;
+    userAgent?: string;
+}
+export declare function submitForm<K extends keyof FormEntryMap>(slug: K, data: FormEntryMap[K]['data'], options?: SubmitFormOptions): Promise<boolean>;
 export {};

package/dist/cms/runtime/api.js

@@ -17,3 +17,6 @@ export async function getCollectionEntry(slug, data, options) {
 export async function getCollectionEntries(slug, options) {
     return (await getEntries({ slug, ...options }));
 }
+export async function submitForm(slug, data, options) {
+    return createFormSubmission({ slug, data, ...options });
+}

package/dist/cms/runtime/schemas.d.ts

@@ -1 +1,9 @@
-export {};
+import { z } from 'zod';
+export declare const contactFormSchema: z.ZodObject<{
+    name: z.ZodString;
+    email: z.ZodString;
+    phone: z.ZodString;
+    subject: z.ZodString;
+    message: z.ZodString;
+    consent: z.ZodBoolean;
+}, z.core.$strip>;

package/dist/cms/runtime/schemas.js

@@ -1,2 +1,10 @@
 // This file is auto-generated. Do not edit directly.
 import { z } from 'zod';
+export const contactFormSchema = z.object({
+    "name": z.string().min(1),
+    "email": z.string().min(1).email(),
+    "phone": z.string(),
+    "subject": z.string(),
+    "message": z.string().min(1),
+    "consent": z.boolean()
+});

package/dist/cms/runtime/types.d.ts

@@ -1,4 +1,4 @@
-import type { ImageFieldData } from 'includio-cms/types';
+import type { ImageFieldData, StructuredContentDoc } from 'includio-cms/types';
 export type SingleSlug = "settings" | "image-showcase";
 export interface Settings {
     id: string;
@@ -6,6 +6,8 @@ export interface Settings {
     data: {
         siteName: string;
         description?: string;
+        logo?: ImageFieldData | null;
+        favicon?: ImageFieldData | null;
         socialLinks?: ({
             slug: 'socialLink';
             data: {
@@ -15,6 +17,9 @@ export interface Settings {
                 };
             };
         })[];
+        footerText?: string;
+        analyticsId?: string;
+        customHeadCode?: string;
     };
     publishedAt: Date | null;
 }
@@ -29,27 +34,35 @@ export interface ImageShowcase {
 export type SingleEntryMap = {
     settings: Settings;
 };
-export type CollectionSlug = "blog-post" | "project";
+export type CollectionSlug = "blog-post" | "project" | "array-test";
 export interface BlogPost {
     id: string;
     slug: string;
     data: {
         title: string;
         slug?: string;
+        cover?: ImageFieldData | null;
+        rating: number;
+        category?: string;
+        publishedAt?: string;
+        thumbnail?: ImageFieldData | null;
+        content?: StructuredContentDoc;
+        tags?: string[];
         seo: {
-            slug?: string;
+            slug: string;
             canonicalUrl?: string;
-            title?: string;
+            title: string;
             description?: string;
             ogImage?: string;
             keywords?: string;
             customCode?: string;
         };
-        category?: string;
-        cover?: ImageFieldData | null;
-        thumbnail?: ImageFieldData | null;
-        content?: string;
-        publishedAt?: string;
+        test?: ({
+            slug: 'test-object';
+            data: {
+                dupa: string;
+            };
+        })[];
     };
     publishedAt: Date | null;
 }
@@ -59,6 +72,8 @@ export interface Project {
     data: {
         title: string;
         description?: string;
+        status?: string;
+        startDate?: string;
         url?: {
             url: string;
         };
@@ -69,8 +84,65 @@ export interface Project {
                 name: string;
             };
         })[];
+        seo: {
+            slug: string;
+            canonicalUrl?: string;
+            title: string;
+            description?: string;
+            ogImage?: string;
+            keywords?: string;
+            customCode?: string;
+        };
+    };
+    publishedAt: Date | null;
+}
+export interface ArrayTest {
+    id: string;
+    slug: string;
+    data: {
+        name: string;
+        tags?: string[];
+        localizedTags?: Record<string, string>[];
+        scores?: number[];
+        links?: UrlFieldData[];
+        unlimited?: string[];
+        content?: ({
+            slug: 'text-block';
+            data: {
+                heading: string;
+                body?: string;
+            };
+        } | {
+            slug: 'image-block';
+            data: {
+                image: ImageFieldData;
+                caption?: string;
+            };
+        })[];
+        highlights?: ({
+            slug: 'highlight';
+            data: {
+                title: string;
+                value?: number;
+            };
+        })[];
     };
     publishedAt: Date | null;
 }
 export type CollectionEntryMap = {};
-export type SiteLanguage = "en";
+export type FormSlug = "contact";
+export interface Contact {
+    data: {
+        name: string;
+        email: string;
+        phone: string;
+        subject: string;
+        message: string;
+        consent: boolean;
+    };
+    publishedAt: Date | null;
+}
+export type FormMap = {
+    contact: Contact;
+};
+export type SiteLanguage = "en" | "pl";

package/dist/cms/runtime/types.js

@@ -5,7 +5,11 @@ image - showcase;
 ImageShowcase;
 ;
 ;
+;
 blog - post;
 BlogPost;
 project: Project;
+array - test;
+ArrayTest;
+;
 export {};

package/dist/components/ui/accordion/accordion.stories.svelte

@@ -0,0 +1,39 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './index.js';
+	import { Input } from '../input/index.js';
+	import { Textarea } from '../textarea/index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Layout/Accordion',
+		component: Accordion,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="SEO Section">
+	<div style="max-width:320px;border:1px solid var(--border);border-radius:12px;overflow:hidden;">
+		<Accordion type="single" collapsible>
+			<AccordionItem value="seo">
+				<AccordionTrigger>
+					<span style="display:flex;align-items:center;gap:8px;">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+						SEO
+					</span>
+				</AccordionTrigger>
+				<AccordionContent>
+					<div style="display:flex;flex-direction:column;gap:12px;padding:0 4px;">
+						<div>
+							<div style="font-size:12px;font-weight:600;color:var(--muted-foreground);margin-bottom:4px;">Meta tytuł</div>
+							<Input value="Jak pisać dostępne treści | AriaCMS" />
+						</div>
+						<div>
+							<div style="font-size:12px;font-weight:600;color:var(--muted-foreground);margin-bottom:4px;">Meta opis</div>
+							<Textarea rows={2} value="Praktyczny przewodnik po tworzeniu treści dostępnych dla wszystkich." />
+						</div>
+					</div>
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	</div>
+</Story>

package/dist/components/ui/accordion/accordion.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Accordion;
+type Accordion = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import { Accordion } from './index.js';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/alert/alert.stories.svelte

@@ -0,0 +1,53 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Alert, AlertDescription } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Feedback/Alert',
+		component: Alert,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	<div style="max-width:500px;">
+		<Alert>
+			<AlertDescription>Domyślny alert z neutralnym stylem</AlertDescription>
+		</Alert>
+	</div>
+</Story>
+
+<Story name="Info">
+	<div style="max-width:500px;">
+		<Alert variant="info">
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+			<AlertDescription>Pominięty poziom nagłówka — rozważ H3 zamiast H4</AlertDescription>
+		</Alert>
+	</div>
+</Story>
+
+<Story name="Success">
+	<div style="max-width:500px;">
+		<Alert variant="success">
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+			<AlertDescription>Hierarchia nagłówków poprawna</AlertDescription>
+		</Alert>
+	</div>
+</Story>
+
+<Story name="Warning">
+	<div style="max-width:500px;">
+		<Alert variant="warning">
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+			<AlertDescription>1 obraz bez opisu alternatywnego</AlertDescription>
+		</Alert>
+	</div>
+</Story>
+
+<Story name="Destructive">
+	<div style="max-width:500px;">
+		<Alert variant="destructive">
+			<AlertDescription>Nie udało się zapisać — sprawdź wymagane pola</AlertDescription>
+		</Alert>
+	</div>
+</Story>

package/dist/components/ui/alert/alert.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Alert;
+type Alert = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Alert: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import { Alert } from './index.js';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/alert/alert.svelte

@@ -8,6 +8,11 @@
 				default: "bg-card text-card-foreground",
 				destructive:
 					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+				success:
+					"border-success/20 bg-success-bg text-success *:data-[slot=alert-description]:text-success/90 [&>svg]:text-current",
+				warning:
+					"border-warning/20 bg-warning-bg text-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-current",
+				info: "border-primary/15 bg-lavender-lighter text-plum-dark *:data-[slot=alert-description]:text-plum-dark/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {

package/dist/components/ui/alert/alert.svelte.d.ts

@@ -3,16 +3,25 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         destructive: string;
+        success: string;
+        warning: string;
+        info: string;
     };
 }, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variant: {
         default: string;
         destructive: string;
+        success: string;
+        warning: string;
+        info: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         destructive: string;
+        success: string;
+        warning: string;
+        info: string;
     };
 }, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];

package/dist/components/ui/avatar/avatar.stories.svelte

@@ -0,0 +1,16 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Avatar, AvatarFallback } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Data/Avatar',
+		component: Avatar,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Gradient">
+	<Avatar style="background:linear-gradient(135deg, var(--lavender), var(--primary));">
+		<AvatarFallback style="background:transparent;color:white;font-weight:700;font-size:12px;">PK</AvatarFallback>
+	</Avatar>
+</Story>