@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/display/MarkdownDisplay.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+/**
+ * Props-driven markdown display.
+ *
+ * Renders a tiny, dependency-free markdown subset (headings, bold,
+ * italic, code, fenced code, links, lists). Output is sanitised by
+ * escaping HTML in the raw source before transformation. For
+ * real-world rich markdown, swap in `marked` or `markdown-it`.
+ */
+import { computed } from "vue"
+
+export interface MarkdownDisplayProps {
+  value?: string | number | null
+  classList?: string[] | string
+}
+
+const props = defineProps<MarkdownDisplayProps>()
+
+const content = computed<string>(() => {
+  if (props.value === undefined || props.value === null) {
+    return ""
+  }
+  return String(props.value)
+})
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+
+function escapeHtml(input: string): string {
+  return input
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+}
+
+function renderMarkdown(src: string): string {
+  if (!src) {
+    return ""
+  }
+  let text = escapeHtml(src)
+
+  // Fenced code blocks ```...```
+  text = text.replace(/```([\s\S]*?)```/g, (_, code: string) => {
+    return `<pre class="bg-muted rounded p-3 overflow-auto"><code class="font-mono text-sm">${code.trim()}</code></pre>`
+  })
+
+  // Inline code `...`
+  text = text.replace(/`([^`\n]+)`/g, '<code class="font-mono bg-muted px-1 rounded text-sm">$1</code>')
+
+  // Headings (# .. ######)
+  text = text.replace(/^######\s+(.+)$/gm, '<h6 class="text-base font-semibold">$1</h6>')
+  text = text.replace(/^#####\s+(.+)$/gm, '<h5 class="text-lg font-semibold">$1</h5>')
+  text = text.replace(/^####\s+(.+)$/gm, '<h4 class="text-xl font-semibold">$1</h4>')
+  text = text.replace(/^###\s+(.+)$/gm, '<h3 class="text-2xl font-semibold">$1</h3>')
+  text = text.replace(/^##\s+(.+)$/gm, '<h2 class="text-3xl font-semibold">$1</h2>')
+  text = text.replace(/^#\s+(.+)$/gm, '<h1 class="text-4xl font-bold">$1</h1>')
+
+  // Bold **text**
+  text = text.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+  // Italic *text*
+  text = text.replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, "$1<em>$2</em>")
+
+  // Links [text](url)
+  text = text.replace(
+    /\[([^\]]+)\]\(([^)\s]+)\)/g,
+    '<a href="$2" class="text-primary underline" target="_blank" rel="noreferrer">$1</a>',
+  )
+
+  // Unordered list items
+  text = text.replace(/^\s*[-*+]\s+(.+)$/gm, "<li>$1</li>")
+  // Ordered list items
+  text = text.replace(/^\s*\d+\.\s+(.+)$/gm, "<li>$1</li>")
+  // Wrap consecutive <li> in <ul>
+  text = text.replace(/(<li>[\s\S]*?<\/li>)(?!\s*<li>)/g, "<ul class=\"list-disc pl-6\">$1</ul>")
+
+  // Paragraphs: any remaining double-newline blocks
+  text = text
+    .split(/\n{2,}/)
+    .map((block) => {
+      if (/^<(h\d|ul|ol|pre|blockquote|li)/.test(block.trim())) {
+        return block
+      }
+      const trimmed = block.trim()
+      return trimmed ? `<p class="leading-7">${trimmed.replace(/\n/g, "<br />")}</p>` : ""
+    })
+    .join("\n")
+
+  return text
+}
+
+const html = computed<string>(() => renderMarkdown(content.value))
+</script>
+
+<template>
+  <div
+    class="prose prose-sm max-w-none"
+    :class="rootClass"
+    data-testid="markdown-display"
+    v-html="html"
+  />
+</template>

package/src/components/compositions/elements/display/ProgressBarDisplay.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import ProgressBarDisplay from "./ProgressBarDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/ProgressBarDisplay",
+  component: ProgressBarDisplay,
+  tags: ["autodocs"],
+  args: { progress: 50, label: "Setup progress" },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-md p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof ProgressBarDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { progress: 50, label: "Setup progress" },
+}
+
+export const WithCustomContent: Story = {
+  args: { progress: 87, label: "Almost done" },
+}
+
+export const Variants: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { ProgressBarDisplay },
+    setup() {
+      const values = [0, 25, 50, 75, 100]
+      return { values }
+    },
+    template: `
+      <div class="flex flex-col gap-3">
+        <ProgressBarDisplay
+          v-for="v in values"
+          :key="v"
+          :progress="v"
+          :label="'At ' + v + '%'"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  args: { progress: 50, label: "Setup progress" },
+}

package/src/components/compositions/elements/display/ProgressBarDisplay.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import ProgressBarDisplay from "./ProgressBarDisplay.vue"
+
+describe("ProgressBarDisplay", () => {
+  it("renders the numeric progress value", () => {
+    const wrapper = mount(ProgressBarDisplay, {
+      props: { progress: 42, label: "Loading" },
+    })
+    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("42%")
+  })
+
+  it("renders 0% when progress is not set", () => {
+    const wrapper = mount(ProgressBarDisplay)
+    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("0%")
+  })
+
+  it("clamps an overflow value to 100", () => {
+    const wrapper = mount(ProgressBarDisplay, { props: { progress: 150 } })
+    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("100%")
+  })
+
+  it("clamps an underflow value to 0", () => {
+    const wrapper = mount(ProgressBarDisplay, { props: { progress: -10 } })
+    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("0%")
+  })
+
+  it("renders a label when provided", () => {
+    const wrapper = mount(ProgressBarDisplay, {
+      props: { progress: 50, label: "Setup" },
+    })
+    expect(wrapper.text()).toContain("Setup")
+  })
+
+  it("applies classList to the root", () => {
+    const wrapper = mount(ProgressBarDisplay, {
+      props: { progress: 50, classList: "track" },
+    })
+    expect(wrapper.attributes("class")).toContain("track")
+  })
+})

package/src/components/compositions/elements/display/ProgressBarDisplay.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * Props-driven progress bar display.
+ *
+ * Wraps the shadcn-vue Progress primitive. The numeric `progress`
+ * prop (0-100) is clamped before being passed to the underlying
+ * indicator.
+ */
+import { computed } from "vue"
+import { Progress } from "@/components/ui/progress"
+
+export interface ProgressBarDisplayProps {
+  progress?: number
+  label?: string
+  hideLabel?: boolean
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<ProgressBarDisplayProps>(), {
+  progress: 0,
+})
+
+function clamp(n: number): number {
+  if (n < 0) {
+    return 0
+  }
+  if (n > 100) {
+    return 100
+  }
+  return n
+}
+
+const value = computed<number>(() => {
+  if (typeof props.progress !== "number" || !Number.isFinite(props.progress)) {
+    return 0
+  }
+  return clamp(props.progress)
+})
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-1.5"
+    :class="rootClass"
+    data-testid="progress-bar-display"
+  >
+    <div
+      v-if="(label && !hideLabel) || !hideLabel"
+      class="flex items-center justify-between text-sm"
+    >
+      <span v-if="label && !hideLabel">{{ label }}</span>
+      <span
+        class="text-muted-foreground"
+        data-testid="progress-bar-value"
+      >{{ value }}%</span>
+    </div>
+    <Progress
+      :value="value"
+      :max="100"
+    />
+  </div>
+</template>

package/src/components/compositions/elements/display/QrCodeDisplay.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import QrCodeDisplay from "./QrCodeDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/QrCodeDisplay",
+  component: QrCodeDisplay,
+  tags: ["autodocs"],
+  args: { value: "https://example.com" },
+  decorators: [
+    () => ({
+      template: '<div class="p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof QrCodeDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { value: "https://example.com" },
+}
+
+export const WithCustomContent: Story = {
+  args: { value: "GXP-EVENT-2026" },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { QrCodeDisplay },
+    template: `
+      <div class="flex gap-6">
+        <QrCodeDisplay value="https://example.com" />
+        <QrCodeDisplay value="Some text content" />
+      </div>
+    `,
+  }),
+}

package/src/components/compositions/elements/display/QrCodeDisplay.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+import { mount, flushPromises } from "@vue/test-utils"
+import QrCodeDisplay from "./QrCodeDisplay.vue"
+
+describe("QrCodeDisplay", () => {
+  it("renders a canvas element", () => {
+    const wrapper = mount(QrCodeDisplay, {
+      props: { value: "https://example.com" },
+    })
+    expect(wrapper.find("canvas").exists()).toBe(true)
+  })
+
+  it("uses the given value in the aria-label", async () => {
+    const wrapper = mount(QrCodeDisplay, {
+      props: { value: "https://from-item.test" },
+    })
+    await flushPromises()
+    expect(wrapper.find("canvas").attributes("aria-label")).toContain(
+      "https://from-item.test",
+    )
+  })
+
+  it("renders an empty aria-label when value is null", async () => {
+    const wrapper = mount(QrCodeDisplay, { props: { value: null } })
+    await flushPromises()
+    expect(wrapper.find("canvas").attributes("aria-label")).toBe("QR code: ")
+  })
+
+  it("applies classList (string) to the root", () => {
+    const wrapper = mount(QrCodeDisplay, {
+      props: { value: "x", classList: "custom" },
+    })
+    expect(wrapper.attributes("class")).toContain("custom")
+  })
+
+  it("applies classList (array) to the root", () => {
+    const wrapper = mount(QrCodeDisplay, {
+      props: { value: "x", classList: ["a", "b"] },
+    })
+    expect(wrapper.attributes("class")).toContain("a")
+    expect(wrapper.attributes("class")).toContain("b")
+  })
+})

package/src/components/compositions/elements/display/QrCodeDisplay.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * Props-driven QR code display.
+ *
+ * Generates a QR code into a `<canvas>` via the `qrcode` library,
+ * lazy-imported on mount.
+ */
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
+
+export interface QrCodeDisplayProps {
+  value?: string | number | null
+  classList?: string[] | string
+}
+
+const props = defineProps<QrCodeDisplayProps>()
+
+const content = computed<string>(() => {
+  if (props.value === undefined || props.value === null) {
+    return ""
+  }
+  return String(props.value)
+})
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+
+const canvasRef = useTemplateRef<HTMLCanvasElement>("canvasRef")
+const error = ref<string>("")
+
+async function renderQr(): Promise<void> {
+  if (!canvasRef.value || !content.value) {
+    return
+  }
+  try {
+    const mod = await import("qrcode")
+    const QRCode = (mod as unknown as { default: { toCanvas: (canvas: HTMLCanvasElement, text: string, opts?: Record<string, unknown>) => Promise<void> } }).default
+    await QRCode.toCanvas(canvasRef.value, content.value, {
+      margin: 1,
+      width: 160,
+    })
+    error.value = ""
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to render QR code"
+  }
+}
+
+onMounted(() => {
+  void renderQr()
+})
+
+watch(content, () => {
+  void renderQr()
+})
+</script>
+
+<template>
+  <div
+    class="inline-block"
+    :class="rootClass"
+    data-testid="qrcode-display"
+  >
+    <canvas
+      ref="canvasRef"
+      :aria-label="`QR code: ${content}`"
+      role="img"
+    />
+    <p
+      v-if="error"
+      class="mt-1 text-xs text-destructive"
+      data-testid="qrcode-error"
+    >
+      {{ error }}
+    </p>
+  </div>
+</template>

package/src/components/compositions/elements/display/ReactiveCanvasDisplay.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import ReactiveCanvasDisplay from "./ReactiveCanvasDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/ReactiveCanvasDisplay",
+  component: ReactiveCanvasDisplay,
+  tags: ["autodocs"],
+  args: { label: "Live preview" },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-xl p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof ReactiveCanvasDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Live preview" },
+}
+
+export const WithCustomContent: Story = {
+  args: { label: "Interactive scene" },
+}
+
+export const Showcase: Story = {
+  args: { label: "Live preview" },
+}

package/src/components/compositions/elements/display/ReactiveCanvasDisplay.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import ReactiveCanvasDisplay from "./ReactiveCanvasDisplay.vue"
+
+describe("ReactiveCanvasDisplay (stub)", () => {
+  it("renders a placeholder card with the given label", () => {
+    const wrapper = mount(ReactiveCanvasDisplay, {
+      props: { label: "Live demo" },
+    })
+    expect(wrapper.text()).toContain("Coming soon")
+    expect(wrapper.text()).toContain("Live demo")
+    expect(wrapper.find("[data-testid='reactive-canvas-display']").exists()).toBe(true)
+  })
+
+  it("falls back to a default label", () => {
+    const wrapper = mount(ReactiveCanvasDisplay)
+    expect(wrapper.text()).toContain("Reactive Canvas")
+  })
+
+  it("applies classList to the root", () => {
+    const wrapper = mount(ReactiveCanvasDisplay, {
+      props: { classList: "stub-class" },
+    })
+    expect(wrapper.attributes("class")).toContain("stub-class")
+  })
+})

package/src/components/compositions/elements/display/ReactiveCanvasDisplay.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+/**
+ * STUB props-driven reactive canvas display.
+ *
+ * Pending the reactive canvas runtime (which itself depends on the
+ * builder counterpart).
+ */
+import { computed } from "vue"
+import { Construction } from "lucide-vue-next"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+
+export interface ReactiveCanvasDisplayProps {
+  label?: string
+  classList?: string[] | string
+}
+
+const props = defineProps<ReactiveCanvasDisplayProps>()
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+</script>
+
+<template>
+  <Card
+    :class="rootClass"
+    data-testid="reactive-canvas-display"
+  >
+    <CardHeader class="flex flex-row items-center gap-3 p-4">
+      <Construction class="size-5 text-muted-foreground" />
+      <div class="flex-1">
+        <CardTitle class="text-base">
+          {{ label ?? "Reactive Canvas" }}
+        </CardTitle>
+        <CardDescription>
+          Coming soon — reactive canvas runtime is not yet implemented.
+        </CardDescription>
+      </div>
+      <Badge variant="secondary">
+        reactive-canvas
+      </Badge>
+    </CardHeader>
+    <CardContent class="p-4 pt-0 text-sm text-muted-foreground">
+      Awaiting the reactive-canvas builder counterpart.
+    </CardContent>
+  </Card>
+</template>

package/src/components/compositions/elements/display/SpriteDisplay.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import SpriteDisplay from "./SpriteDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/SpriteDisplay",
+  component: SpriteDisplay,
+  tags: ["autodocs"],
+  args: { label: "Confetti" },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-xl p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof SpriteDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Confetti" },
+}
+
+export const WithCustomContent: Story = {
+  args: { label: "Loading animation" },
+}
+
+export const Showcase: Story = {
+  args: { label: "Confetti" },
+}

package/src/components/compositions/elements/display/SpriteDisplay.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import SpriteDisplay from "./SpriteDisplay.vue"
+
+describe("SpriteDisplay (stub)", () => {
+  it("renders a placeholder card with the given label", () => {
+    const wrapper = mount(SpriteDisplay, { props: { label: "Confetti" } })
+    expect(wrapper.text()).toContain("Coming soon")
+    expect(wrapper.text()).toContain("Confetti")
+    expect(wrapper.find("[data-testid='sprite-display']").exists()).toBe(true)
+  })
+
+  it("falls back to a default label", () => {
+    const wrapper = mount(SpriteDisplay)
+    expect(wrapper.text()).toContain("Sprite")
+  })
+
+  it("applies classList to the root", () => {
+    const wrapper = mount(SpriteDisplay, {
+      props: { classList: "stub-class" },
+    })
+    expect(wrapper.attributes("class")).toContain("stub-class")
+  })
+})

package/src/components/compositions/elements/display/SpriteDisplay.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+/**
+ * STUB props-driven sprite display.
+ *
+ * Pending decisions on sprite sheet format (CSS background, SVG
+ * symbol, animation timeline).
+ */
+import { computed } from "vue"
+import { Construction } from "lucide-vue-next"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+
+export interface SpriteDisplayProps {
+  label?: string
+  classList?: string[] | string
+}
+
+const props = defineProps<SpriteDisplayProps>()
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+</script>
+
+<template>
+  <Card
+    :class="rootClass"
+    data-testid="sprite-display"
+  >
+    <CardHeader class="flex flex-row items-center gap-3 p-4">
+      <Construction class="size-5 text-muted-foreground" />
+      <div class="flex-1">
+        <CardTitle class="text-base">
+          {{ label ?? "Sprite" }}
+        </CardTitle>
+        <CardDescription>
+          Coming soon — sprite playback is not yet implemented.
+        </CardDescription>
+      </div>
+      <Badge variant="secondary">
+        sprite
+      </Badge>
+    </CardHeader>
+    <CardContent class="p-4 pt-0 text-sm text-muted-foreground">
+      Sprite sheet format TBD.
+    </CardContent>
+  </Card>
+</template>