@upstart.gg/sdk 0.0.138 → 0.0.139

package/dist/shared/bricks/manifests/card.manifest.d.ts

@@ -1,92 +1,99 @@
-import type { BrickExample } from "./_types";
-export declare const manifest: {
-    readonly icon: import("react-icons/lib").IconType;
-    readonly props: import("@sinclair/typebox").TObject<{
-        lastTouched: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
-        hidden: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            desktop: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-            mobile: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        }>>;
-        editable: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        width: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        height: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        grow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        alignSelf: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"self-auto" | "self-start" | "self-center" | "self-end" | "self-stretch">>;
-    } & {
-        colorPreset: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            color: import("@sinclair/typebox").TUnsafe<"none" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary-50" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "neutral-50" | "neutral-100" | "neutral-200" | "neutral-300" | "neutral-400" | "neutral-500" | "neutral-600" | "neutral-700" | "neutral-800" | "neutral-900" | "base-100" | "base-200" | "base-300" | "primary-gradient-100" | "primary-gradient-200" | "primary-gradient-300" | "primary-gradient-400" | "primary-gradient-500" | "primary-gradient-600" | "primary-gradient-700" | "primary-gradient-800" | "secondary-gradient-100" | "secondary-gradient-200" | "secondary-gradient-300" | "secondary-gradient-400" | "secondary-gradient-500" | "secondary-gradient-600" | "secondary-gradient-700" | "secondary-gradient-800" | "accent-gradient-100" | "accent-gradient-200" | "accent-gradient-300" | "accent-gradient-400" | "accent-gradient-500" | "accent-gradient-600" | "accent-gradient-700" | "accent-gradient-800" | "neutral-gradient-100" | "neutral-gradient-200" | "neutral-gradient-300" | "neutral-gradient-400" | "neutral-gradient-500" | "neutral-gradient-600" | "neutral-gradient-700" | "neutral-gradient-800" | "base-gradient-100" | "base-gradient-200">;
-            gradientDirection: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"bg-gradient-to-t" | "bg-gradient-to-r" | "bg-gradient-to-b" | "bg-gradient-to-l" | "bg-gradient-to-tl" | "bg-gradient-to-tr" | "bg-gradient-to-br" | "bg-gradient-to-bl">>;
-        }>>;
-        cardImage: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            src: import("@sinclair/typebox").TString;
-            alt: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-            aspectRatio: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"auto" | "1:1" | "4:3" | "3:4" | "16:9" | "9:16" | "2:3" | "3:2" | "5:4" | "4:5" | "21:9" | "9:21" | "original">>;
-            fit: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"object-none" | "object-contain" | "object-cover" | "object-fill" | "object-scale-down">>;
-            position: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"object-top" | "object-center" | "object-bottom" | "object-left" | "object-right" | "object-top-left" | "object-top-right" | "object-bottom-left" | "object-bottom-right">>;
-        }>>;
-        imagePosition: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"bottom" | "top" | "middle">>;
-        noTitle: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        title: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        text: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        rounding: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"rounded-auto" | "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-xl" | "rounded-2xl" | "rounded-full">>;
-        border: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            width: import("@sinclair/typebox").TUnsafe<"border" | "border-0" | "border-2" | "border-4" | "border-8">;
-            color: import("@sinclair/typebox").TString;
-        }>>;
-        shadow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"shadow-none" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl" | "shadow-2xl">>;
-        loop: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            over: import("@sinclair/typebox").TString;
-            overrideLimit: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
-        }>>;
-        button: import("@sinclair/typebox").TObject<{
-            label: import("@sinclair/typebox").TString;
-            url: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TString]>;
-            color: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"btn-neutral" | "btn-primary" | "btn-secondary" | "btn-accent">>;
-        }>;
-        grow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+import { BrickCategory } from "../../brick-manifest.js";
+import { BrickExample } from "./_types.js";
+import * as _sinclair_typebox2334 from "@sinclair/typebox";
+import * as react_icons_lib3 from "react-icons/lib";
+
+//#region src/shared/bricks/manifests/card.manifest.d.ts
+declare const manifest: {
+  readonly icon: react_icons_lib3.IconType;
+  readonly props: _sinclair_typebox2334.TObject<{
+    lastTouched: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TNumber>;
+    hidden: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TObject<{
+      desktop: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TBoolean>;
+      mobile: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TBoolean>;
+    }>>;
+    editable: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TBoolean>;
+    width: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TString>;
+    height: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TString>;
+    grow: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TBoolean>;
+    alignSelf: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"self-auto" | "self-start" | "self-center" | "self-end" | "self-stretch">>;
+  } & {
+    colorPreset: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TObject<{
+      color: _sinclair_typebox2334.TUnsafe<"primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary-50" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "neutral-50" | "neutral-100" | "neutral-200" | "neutral-300" | "neutral-400" | "neutral-500" | "neutral-600" | "neutral-700" | "neutral-800" | "neutral-900" | "base-100" | "base-200" | "base-300" | "primary-gradient-100" | "primary-gradient-200" | "primary-gradient-300" | "primary-gradient-400" | "primary-gradient-500" | "primary-gradient-600" | "primary-gradient-700" | "primary-gradient-800" | "secondary-gradient-100" | "secondary-gradient-200" | "secondary-gradient-300" | "secondary-gradient-400" | "secondary-gradient-500" | "secondary-gradient-600" | "secondary-gradient-700" | "secondary-gradient-800" | "accent-gradient-100" | "accent-gradient-200" | "accent-gradient-300" | "accent-gradient-400" | "accent-gradient-500" | "accent-gradient-600" | "accent-gradient-700" | "accent-gradient-800" | "neutral-gradient-100" | "neutral-gradient-200" | "neutral-gradient-300" | "neutral-gradient-400" | "neutral-gradient-500" | "neutral-gradient-600" | "neutral-gradient-700" | "neutral-gradient-800" | "base-gradient-100" | "base-gradient-200" | "none">;
+      gradientDirection: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"bg-gradient-to-t" | "bg-gradient-to-r" | "bg-gradient-to-b" | "bg-gradient-to-l" | "bg-gradient-to-tl" | "bg-gradient-to-tr" | "bg-gradient-to-br" | "bg-gradient-to-bl">>;
+    }>>;
+    cardImage: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TObject<{
+      src: _sinclair_typebox2334.TString;
+      alt: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TString>;
+      aspectRatio: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"auto" | "1:1" | "4:3" | "3:4" | "16:9" | "9:16" | "2:3" | "3:2" | "5:4" | "4:5" | "21:9" | "9:21" | "original">>;
+      fit: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"object-none" | "object-contain" | "object-cover" | "object-fill" | "object-scale-down">>;
+      position: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"object-top" | "object-center" | "object-bottom" | "object-left" | "object-right" | "object-top-left" | "object-top-right" | "object-bottom-left" | "object-bottom-right">>;
+    }>>;
+    imagePosition: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"bottom" | "top" | "middle">>;
+    noTitle: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TBoolean>;
+    title: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TString>;
+    text: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TString>;
+    rounding: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"rounded-md" | "rounded-auto" | "rounded-none" | "rounded-sm" | "rounded-lg" | "rounded-xl" | "rounded-2xl" | "rounded-full">>;
+    border: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TObject<{
+      width: _sinclair_typebox2334.TUnsafe<"border" | "border-0" | "border-2" | "border-4" | "border-8">;
+      color: _sinclair_typebox2334.TString;
+    }>>;
+    shadow: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"shadow-none" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl" | "shadow-2xl">>;
+    loop: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TObject<{
+      over: _sinclair_typebox2334.TString;
+      overrideLimit: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TNumber>;
+    }>>;
+    button: _sinclair_typebox2334.TObject<{
+      label: _sinclair_typebox2334.TString;
+      url: _sinclair_typebox2334.TUnion<[_sinclair_typebox2334.TString, _sinclair_typebox2334.TString]>;
+      color: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TUnsafe<"btn-neutral" | "btn-primary" | "btn-secondary" | "btn-accent">>;
     }>;
-    readonly category: import("~/shared/brick-manifest").BrickCategory;
-    readonly defaultInspectorTab: "content" | "style" | "preset";
-    readonly hideInLibrary: boolean;
-    readonly deletable: boolean;
-    readonly movable: boolean;
-    readonly resizable: boolean | "horizontal" | "vertical";
-    readonly duplicatable: boolean;
-    readonly isContainer: boolean;
-    readonly isGlobalBrick: boolean;
-    readonly defaultWidth: {
-        readonly mobile: string;
-        readonly desktop: string;
-    };
-    readonly defaultHeight: {
-        readonly mobile: string;
-        readonly desktop: string;
-    };
-    readonly type: string;
-    readonly name: string;
-    readonly iconClassName?: string;
-    readonly staticClasses?: string;
-    readonly description?: string;
-    readonly minWidth?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly maxWidth?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly minHeight?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly maxHeight?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly consumesMultipleQueryRows?: boolean;
-    readonly inlineDragDisabled?: boolean;
-    readonly aiInstructions?: string;
+    grow: _sinclair_typebox2334.TOptional<_sinclair_typebox2334.TBoolean>;
+  }>;
+  readonly category: BrickCategory;
+  readonly defaultInspectorTab: "preset" | "style" | "content";
+  readonly hideInLibrary: boolean;
+  readonly deletable: boolean;
+  readonly movable: boolean;
+  readonly resizable: boolean | "horizontal" | "vertical";
+  readonly duplicatable: boolean;
+  readonly isContainer: boolean;
+  readonly isGlobalBrick: boolean;
+  readonly defaultWidth: {
+    readonly mobile: string;
+    readonly desktop: string;
+  };
+  readonly defaultHeight: {
+    readonly mobile: string;
+    readonly desktop: string;
+  };
+  readonly type: string;
+  readonly name: string;
+  readonly iconClassName?: string;
+  readonly staticClasses?: string;
+  readonly description?: string;
+  readonly minWidth?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly maxWidth?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly minHeight?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly maxHeight?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly consumesMultipleQueryRows?: boolean;
+  readonly inlineDragDisabled?: boolean;
+  readonly aiInstructions?: string;
 };
-export type Manifest = typeof manifest;
-export declare const examples: BrickExample<Manifest>[];
+type Manifest = typeof manifest;
+declare const examples: BrickExample<Manifest>[];
+//#endregion
+export { Manifest, examples, manifest };
 //# sourceMappingURL=card.manifest.d.ts.map

package/dist/shared/bricks/manifests/card.manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.manifest.d.ts","sourceRoot":"","sources":["../../../../src/shared/bricks/manifests/card.manifest.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cANL,CAAC;eAAqB,CAAC;;;cAEhC,CAAA;eAAqB,CAAC;;;cAE1B,CAAC;eAAqB,CAAC;;;cAGlB,CAAC;eACK,CAAC;;;;;CA0Gb,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EA0O5C,CAAC"}
+{"version":3,"file":"card.manifest.d.ts","names":[],"sources":["../../../../src/shared/bricks/manifests/card.manifest.ts"],"sourcesContent":[],"mappings":";;;;;;cAea;iBA0GX,gBAAA,CAAA;;;;MA1GW,OA0GX,iCAAA,gCAAA;MAAA,MAAA,iCAAA,gCAAA;IAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEU,CAAA;EAEC,SAAA,SA0OZ,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IA1OmC,OAAA,CAAA,EAAA,MAAA;;EAAD,SAAA,SAAA,CAAA,EAAA;;;;;;;;KAFvB,QAAA,UAAkB;cAEjB,UAAU,aAAa"}

package/dist/shared/bricks/manifests/card.manifest.js

@@ -1,30 +1,394 @@
-/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
+import { StringEnum } from "../../utils/string-enum.js";
+import { defineBrickManifest } from "../../brick-manifest.js";
+import { grow } from "../props/grow.js";
+import { defineProps } from "../props/helpers.js";
+import { urlOrPageId } from "../props/string.js";
+import { image } from "../props/image.js";
+import { textContent } from "../props/text.js";
+import { shadow } from "../props/effects.js";
+import { colorPreset } from "../props/color-preset.js";
+import { loop } from "../props/dynamic.js";
+import { border, rounding } from "../props/border.js";
+import { Type } from "@sinclair/typebox";
+import { BsCardText } from "react-icons/bs";
 
-import {
-  examples,
-  manifest
-} from "../../chunk-5J4Y43RM.js";
-import "../../chunk-VYA2FCTY.js";
-import "../../chunk-EUFVTHAG.js";
-import "../../chunk-UC75KRLX.js";
-import "../../chunk-2Z5WOCFS.js";
-import "../../chunk-5RCC2STG.js";
-import "../../chunk-XFZQGRRL.js";
-import "../../chunk-FYGFB5U5.js";
-import "../../chunk-2U5U3CCJ.js";
-import "../../chunk-IEMCCHM4.js";
-import "../../chunk-2UEPTT5J.js";
-import "../../chunk-2EOCK66Z.js";
-import "../../chunk-OJ6KL7FU.js";
-import "../../chunk-ZRBTAC3G.js";
-import "../../chunk-EMF5TCPX.js";
-import "../../chunk-MO6CRLQA.js";
-import "../../chunk-GNTJT7MR.js";
-import "../../chunk-TZ6X7ZM5.js";
-import "../../chunk-GDYCCB3B.js";
-import "../../chunk-ZGQ3AQBG.js";
-export {
-  examples,
-  manifest
-};
+//#region src/shared/bricks/manifests/card.manifest.ts
+const manifest = defineBrickManifest({
+	type: "card",
+	name: "Card",
+	description: "A card that can have a title, image, content, and button.",
+	aiInstructions: `Use this brick to create visually distinct content blocks (product, feature, event, article, blog post, etc.).
+
+Guidelines:
+- Always provide a short button label (1-3 words) and pick a color matching semantic weight (primary/accent for primary actions, neutral/secondary for low emphasis).
+- Set noTitle: true when the card is intentionally title-less (e.g. a quote card or pure media focus).
+- Use dynamic tokens (e.g. {{products.price}}) instead of duplicating literal values.
+- A good value for the "colorPreset" is base-100 for light mode and neutral-800 for dark mode.
+- border + rounding + shadow should be cohesive: stronger borders pair well with larger rounding + moderate shadow; minimal / flat cards may use border-0 + no shadow.
+- For internal navigation, always supply a page ID (e.g. 'about') instead of a full URL. Use placeholders like {{page.$slug}} for dynamic page links.
+- Keep HTML inside text minimal (<strong>, <em>, <br>, <p>) — for richer structure consider multiple bricks instead.
+- Avoid mixing noTitle with large heading text embedded inside the text field — in that case keep a proper title.`,
+	icon: BsCardText,
+	defaultWidth: {
+		desktop: "400px",
+		mobile: "100%"
+	},
+	minWidth: { desktop: 300 },
+	minHeight: {
+		mobile: 200,
+		desktop: 200
+	},
+	maxWidth: { desktop: 650 },
+	props: defineProps({
+		colorPreset: Type.Optional(colorPreset({ title: "Color preset" })),
+		cardImage: Type.Optional(image({
+			"ui:responsive": "desktop",
+			metadata: { category: "content" }
+		})),
+		imagePosition: Type.Optional(StringEnum([
+			"top",
+			"middle",
+			"bottom"
+		], {
+			enumNames: [
+				"Top",
+				"Middle",
+				"Bottom"
+			],
+			title: "Image Position",
+			description: "Where the image should be placed in the card",
+			"ui:responsive": "desktop",
+			metadata: {
+				category: "content",
+				filter: (manifestProps, formData) => {
+					return !!formData.cardImage?.src;
+				}
+			}
+		})),
+		noTitle: Type.Optional(Type.Boolean({
+			title: "No Title",
+			description: "Whether to hide the card title",
+			"ui:responsive": "desktop"
+		})),
+		title: Type.Optional(textContent({ title: "Title" })),
+		text: Type.Optional(textContent({ title: "Text" })),
+		rounding: Type.Optional(rounding({ default: "rounded-md" })),
+		border: Type.Optional(border({})),
+		shadow: Type.Optional(shadow({ default: "shadow-sm" })),
+		loop: Type.Optional(loop()),
+		button: Type.Object({
+			label: Type.String({
+				title: "Button label",
+				default: "Click me",
+				examples: [
+					"Learn more",
+					"Buy now",
+					"Sign up"
+				],
+				metadata: { category: "content" }
+			}),
+			url: urlOrPageId({
+				title: "Button URL",
+				description: "The URL or page id the button should link to.",
+				metadata: { category: "content" }
+			}),
+			color: Type.Optional(StringEnum([
+				"btn-neutral",
+				"btn-primary",
+				"btn-secondary",
+				"btn-accent"
+			], {
+				enumNames: [
+					"Neutral",
+					"Primary",
+					"Secondary",
+					"Accent"
+				],
+				title: "Color",
+				default: "btn-primary"
+			}))
+		}, {
+			title: "Button",
+			description: "Button displayed at the bottom of the card"
+		}),
+		grow: Type.Optional(grow({ default: true }))
+	})
+});
+const examples = [
+	{
+		description: "A simple card with a title and content",
+		type: "card",
+		props: {
+			title: "Card Title",
+			text: "This is the body of the card.",
+			button: {
+				label: "Learn more",
+				url: "/learn-more",
+				color: "btn-primary"
+			}
+		}
+	},
+	{
+		description: "Feature highlight card with centered image (imagePosition=middle)",
+		type: "card",
+		props: {
+			cardImage: {
+				src: "https://via.placeholder.com/420x240",
+				alt: "Feature visual"
+			},
+			imagePosition: "middle",
+			title: "Blazing Performance",
+			text: "Our new engine reduces processing time by 45% while maintaining reliability.",
+			colorPreset: { color: "primary-100" },
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			rounding: "rounded-lg",
+			shadow: "shadow-sm",
+			button: {
+				label: "Learn More",
+				url: "/features/performance",
+				color: "btn-primary"
+			}
+		}
+	},
+	{
+		description: "Case study card with image at the bottom (imagePosition=bottom)",
+		type: "card",
+		props: {
+			title: "Case Study: ScaleOps",
+			text: "How ScaleOps handled 10x growth with zero downtime using our platform.",
+			cardImage: {
+				src: "https://via.placeholder.com/600x260",
+				alt: "Scale graph"
+			},
+			imagePosition: "bottom",
+			colorPreset: { color: "secondary-50" },
+			rounding: "rounded-md",
+			shadow: "shadow-sm",
+			button: {
+				label: "Read Study",
+				url: "/cases/scaleops",
+				color: "btn-secondary"
+			}
+		}
+	},
+	{
+		description: "Quote / testimonial style card without a title (uses noTitle=true)",
+		type: "card",
+		props: {
+			noTitle: true,
+			text: "\"This toolkit accelerated our launch by weeks — the component quality is outstanding.\"<br><em>— CTO, FinEdge</em>",
+			colorPreset: { color: "neutral-100" },
+			border: {
+				width: "border",
+				color: "border-neutral-300"
+			},
+			rounding: "rounded-xl",
+			shadow: "shadow-sm",
+			button: {
+				label: "See More",
+				url: "/testimonials",
+				color: "btn-neutral"
+			}
+		}
+	},
+	{
+		description: "Internal navigation card using a page ID for the button URL (page id = 'about')",
+		type: "card",
+		props: {
+			title: "About Our Mission",
+			text: "Learn how we're building an open, extensible site generation platform for modern teams.",
+			colorPreset: { color: "base-100" },
+			rounding: "rounded-md",
+			button: {
+				label: "About Us",
+				url: "about",
+				color: "btn-primary"
+			}
+		}
+	},
+	{
+		description: "High-emphasis promotional card using gradient background and thick border, linking to the page with id 'pricing-page'",
+		type: "card",
+		props: {
+			title: "Limited Time Offer",
+			text: "Upgrade now and receive a complimentary strategy session plus extended analytics access.",
+			colorPreset: {
+				color: "primary-gradient-400",
+				gradientDirection: "bg-gradient-to-tr"
+			},
+			border: {
+				width: "border-4",
+				color: "border-primary-400"
+			},
+			rounding: "rounded-xl",
+			shadow: "shadow-lg",
+			button: {
+				label: "Upgrade",
+				url: "pricing-page",
+				color: "btn-accent"
+			}
+		}
+	},
+	{
+		description: "Minimal flat information card (border-0, no shadow) linking to the page with id 'status-page'",
+		type: "card",
+		props: {
+			title: "Maintenance Window",
+			text: "Scheduled maintenance on Saturday 02:00–03:00 UTC. API responses may be delayed.",
+			colorPreset: { color: "neutral-50" },
+			border: {
+				width: "border-0",
+				color: "border-neutral-200"
+			},
+			button: {
+				label: "Status Page",
+				url: "status-page",
+				color: "btn-neutral"
+			}
+		}
+	},
+	{
+		description: "Feature card with large padding and background, linking to a dynamic product page",
+		type: "card",
+		props: {
+			title: "Key Feature",
+			text: "This feature provides exceptional value and enhances user experience significantly.",
+			colorPreset: { color: "primary-50" },
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			rounding: "rounded-lg",
+			shadow: "shadow-sm",
+			button: {
+				label: "Discover More",
+				url: "/product/{{ product.$slug }}",
+				color: "btn-primary"
+			}
+		}
+	},
+	{
+		description: "Blog post card with image at the bottom, linking to a dynamic blog post",
+		type: "card",
+		props: {
+			title: "Future of Tech",
+			text: "Exploring emerging trends and innovations that will shape our digital landscape in the coming decade.",
+			cardImage: {
+				src: "https://via.placeholder.com/400x200",
+				alt: "Technology concept"
+			},
+			button: {
+				label: "Read More",
+				url: "/blog/{{ blogPosts.$slug }}",
+				color: "btn-primary"
+			},
+			loop: { over: "blogPosts" }
+		}
+	},
+	{
+		description: "Dynamic product card using products query with pricing and details",
+		type: "card",
+		props: {
+			cardImage: {
+				src: "{{products.image}}",
+				alt: "{{products.name}}"
+			},
+			title: "{{products.name}}",
+			text: "{{products.description}}<br><strong>Price: ${{products.price}}</strong><br>Category: {{products.category}}",
+			colorPreset: { color: "primary-50" },
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			rounding: "rounded-lg",
+			shadow: "shadow-md",
+			button: {
+				label: "Buy Now",
+				url: "{{products.purchaseUrl}}",
+				color: "btn-primary"
+			},
+			loop: { over: "products" }
+		}
+	},
+	{
+		description: "Employee profile card using teamMembers query with contact information",
+		type: "card",
+		props: {
+			cardImage: {
+				src: "{{teamMembers.photo}}",
+				alt: "Photo of {{teamMembers.fullName}}"
+			},
+			imagePosition: "top",
+			title: "{{teamMembers.fullName}}",
+			text: "<strong>{{teamMembers.position}}</strong><br>{{teamMembers.department}}<br>Email: {{teamMembers.email}}<br>Phone: {{teamMembers.phone}}",
+			colorPreset: { color: "neutral-100" },
+			rounding: "rounded-xl",
+			shadow: "shadow-lg",
+			button: {
+				label: "Contact",
+				url: "mailto:{{teamMembers.email}}",
+				color: "btn-neutral"
+			},
+			loop: { over: "teamMembers" }
+		}
+	},
+	{
+		description: "Blog post card using blogPosts query with author and date",
+		type: "card",
+		props: {
+			cardImage: {
+				src: "{{blogPosts.featuredImage}}",
+				alt: "{{blogPosts.title}}"
+			},
+			imagePosition: "top",
+			title: "{{blogPosts.title}}",
+			text: "{{blogPosts.excerpt}}<br><br><em>By {{blogPosts.author}} • {{blogPosts.publishDate}}</em><br>Tags: {{blogPosts.tags}}",
+			colorPreset: { color: "secondary-50" },
+			border: {
+				width: "border",
+				color: "border-secondary-300"
+			},
+			rounding: "rounded-md",
+			shadow: "shadow-sm",
+			button: {
+				label: "Read More",
+				url: "{{blogPosts.url}}",
+				color: "btn-secondary"
+			},
+			loop: { over: "blogPosts" }
+		}
+	},
+	{
+		description: "Event listing card using upcomingEvents query with venue details",
+		type: "card",
+		props: {
+			cardImage: {
+				src: "{{upcomingEvents.banner}}",
+				alt: "{{upcomingEvents.title}}"
+			},
+			imagePosition: "top",
+			title: "{{upcomingEvents.title}}",
+			text: "<strong>{{upcomingEvents.date}} at {{upcomingEvents.time}}</strong><br>{{upcomingEvents.venue}}, {{upcomingEvents.city}}<br><br>{{upcomingEvents.description}}<br><br>Tickets: ${{upcomingEvents.price}}",
+			colorPreset: { color: "accent-100" },
+			border: {
+				width: "border-2",
+				color: "border-accent-400"
+			},
+			rounding: "rounded-lg",
+			shadow: "shadow-md",
+			button: {
+				label: "Book Tickets",
+				url: "{{upcomingEvents.ticketUrl}}",
+				color: "btn-accent"
+			},
+			loop: { over: "upcomingEvents" }
+		}
+	}
+];
+
+//#endregion
+export { examples, manifest };
 //# sourceMappingURL=card.manifest.js.map