@gxp-dev/app-ui 0.1.0

package/.storybook/main.ts

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import { resolve } from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes',
+    '@storybook/addon-mcp',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': resolve(__dirname, '../src'),
+        '@ericblade/quagga2': resolve(__dirname, '../src/__mocks__/@ericblade/quagga2.ts'),
+      }
+    }
+    return config
+  },
+}
+
+export default config

package/.storybook/preview.ts

@@ -0,0 +1,26 @@
+import type { Preview } from '@storybook/vue3'
+import '../src/styles/tailwind.css'
+import '../src/styles/themes/default.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'platform',
+      values: [
+        { name: 'platform', value: '#000466' },
+        { name: 'modal', value: '#FFFFFF' },
+        { name: 'dark', value: '#03054a' },
+        { name: 'light', value: '#f8fafc' },
+      ],
+    },
+  },
+}
+
+export default preview

package/README.md

@@ -0,0 +1,440 @@
+# @gxp-dev/app-ui
+
+Vue 3 UI component library for GXP platform applications, built on shadcn-vue, reka-ui, and Tailwind CSS.
+
+**📖 [Browse the live Storybook →](https://gramercytech.github.io/gx-appui/)** — every component, composable, and experience-flow page with interactive props, slot examples, and usage notes.
+
+## Installation
+
+```bash
+pnpm add @gxp-dev/app-ui
+```
+
+## Setup
+
+### 1. Import Styles
+
+Import the library styles in your application entry point:
+
+```typescript
+// main.ts
+import '@gxp-dev/app-ui/styles'
+```
+
+This includes the default GXP theme. For custom theming, see the [Theming](#theming) section.
+
+### 2. Configure Tailwind (Optional)
+
+If you want to extend the library styles with Tailwind in your application:
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{vue,ts}',
+    './node_modules/@gxp-dev/app-ui/**/*.js'
+  ]
+}
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Button, Input, Dialog, DialogContent, DialogTrigger } from '@gxp-dev/app-ui'
+</script>
+
+<template>
+  <div>
+    <Input v-model="text" placeholder="Enter text" />
+    <Button variant="default">Submit</Button>
+
+    <Dialog>
+      <DialogTrigger>Open Dialog</DialogTrigger>
+      <DialogContent>
+        <p>Dialog content</p>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
+```
+
+## Components
+
+The library includes 40+ shadcn-vue UI primitives, 8 domain-specific components, 5 composables, and utility functions.
+
+### UI Primitives (shadcn-vue)
+
+Built on reka-ui with full accessibility support:
+
+**Form Controls**: Button, Input, Textarea, Label, Checkbox, Switch, RadioGroup, Select, Slider, Form
+
+**Layout**: Card, Separator, AspectRatio, ScrollArea, Sheet, Tabs, Accordion, Collapsible
+
+**Overlays**: Dialog, AlertDialog, Popover, Tooltip, HoverCard, ContextMenu, DropdownMenu, Command
+
+**Feedback**: Alert, Badge, Avatar, Skeleton, Progress, Toaster (Sonner)
+
+**Navigation**: Pagination, Table, Menubar, NavigationMenu, Calendar
+
+### Domain Components
+
+Purpose-built components for GXP platform applications:
+
+- **Spinner**: Loading spinner with customizable size and color
+- **Header**: Application header with logo, title, and navigation
+- **Countdown**: Animated countdown timer with customizable display
+- **VideoPlayer**: Video playback with custom controls and events
+- **FileUploader**: Drag-and-drop file upload with preview and validation
+- **BarcodeScanner**: Real-time barcode scanning using device camera
+- **Leaderboard**: Animated leaderboard with activity notifications and award icons
+- **AudioVisualizer**: Real-time audio visualization with canvas rendering
+
+### Composables
+
+Reusable Vue 3 composition functions:
+
+- **useMedia**: Media device access (camera, microphone) with recording capabilities
+- **useScanning**: Barcode/QR code scanning functionality
+- **useAnimations**: Animation utilities for transitions and effects
+- **useErrors**: Centralized error handling and display
+- **useNfcListener**: NFC tag reading and simulation
+
+### Experience Flow
+
+A state-machine-driven orchestrator with 20 prebuilt page components for multi-stage interactive apps (kiosks, photo booths, AI experiences):
+
+- **`useExperience(config)`** — navigation, reactive context, skip conditions, action binding, busy/error state
+- **`<ExperienceFlow :flow />`** — renderer with transitions and loading/error slots
+- **`useExperienceApi({ callApi })`** — optional adapter that turns `callApi` into typed named operations (`publishPost`, `createPrintJob`, `processImage`, …)
+- **20 prebuilt pages** — Welcome, Terms, Instructions, Camera + Review, Video + Review, Audio + Review, Drawing, Notepad, Text, Prompt, Options, Form, ResultsGallery, PhotoEdit, Share, Loading, Final
+
+```vue
+<script setup lang="ts">
+import { callApi } from '@gxp-dev/devtools'
+import {
+  useExperience, useExperienceApi, ExperienceFlow,
+  WelcomePage, TermsPage, CameraPage, CameraReviewPage, FinalPage,
+} from '@gxp-dev/app-ui'
+
+const api = useExperienceApi({ callApi })
+
+const flow = useExperience({
+  api,
+  pages: [
+    { name: 'welcome', component: WelcomePage },
+    { name: 'terms',   component: TermsPage,   props: { html: tos } },
+    { name: 'capture', component: CameraPage },          // → ctx.photoBlob
+    { name: 'review',  component: CameraReviewPage },    // default action: publishPost → ctx.post
+    { name: 'final',   component: FinalPage },
+  ],
+})
+</script>
+
+<template>
+  <ExperienceFlow :flow="flow" />
+</template>
+```
+
+See [Experience Flow → Overview](./docs/experience-flow/overview.md) for the full guide, [Pages reference](./docs/experience-flow/pages.md), and [API adapter](./docs/experience-flow/api-adapter.md).
+
+## Theming
+
+The library uses CSS variables for theming, compatible with the GXP platform theming system.
+
+### Using the Default Theme
+
+The default import includes the GXP theme:
+
+```typescript
+import '@gxp-dev/app-ui/styles'
+```
+
+### Custom Theming
+
+For custom themes, import only the base styles and define your own CSS variables:
+
+```typescript
+// Import base styles without theme
+import '@gxp-dev/app-ui/styles/base'
+```
+
+Then define the CSS variables in your application:
+
+```css
+:root {
+  /* Core Platform Variables */
+  --page_background_color: #ffffff;
+  --page_text_color: #222222;
+  --input_field_background_color: #f5f5f5;
+  --input_field_text_color: #222222;
+  --input_field_border_color: #cccccc;
+
+  /* Primary Button */
+  --primary_button_background_color: #0066cc;
+  --primary_button_text_color: #ffffff;
+  --primary_button_border_color: #0066cc;
+
+  /* Secondary Button */
+  --secondary_button_background_color: #f5f5f5;
+  --secondary_button_text_color: #222222;
+  --secondary_button_border_color: #cccccc;
+
+  /* Shadcn/Tailwind mappings (auto-derived from above) */
+  --background: var(--page_background_color);
+  --foreground: var(--page_text_color);
+  --primary: var(--primary_button_background_color);
+  --primary-foreground: var(--primary_button_text_color);
+  --secondary: var(--secondary_button_background_color);
+  --secondary-foreground: var(--secondary_button_text_color);
+  --border: var(--input_field_border_color);
+  --input: var(--input_field_background_color);
+  --ring: var(--primary_button_border_color);
+  --radius: 0.5rem;
+}
+```
+
+## Utilities
+
+**cn()**: Merge Tailwind CSS classes with conflict resolution
+
+**processUploadedImage()**: Process and validate uploaded image files
+
+**convertToCanvasBlob()**: Convert canvas to blob for image manipulation
+
+```typescript
+import { cn, processUploadedImage, convertToCanvasBlob } from '@gxp-dev/app-ui'
+
+// Class merging
+const classes = cn('base-class', condition && 'conditional-class')
+
+// Image processing
+const blob = await processUploadedImage(file, { maxWidth: 1920 })
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Run tests with coverage
+pnpm test:coverage
+
+# Build library
+pnpm build
+
+# Start Storybook locally
+pnpm storybook
+
+# Build the static Storybook bundle (deployed to GitHub Pages by CI)
+pnpm storybook:build
+```
+
+## Exports
+
+```typescript
+// UI Primitives
+import {
+  Button,
+  Input,
+  Label,
+  Textarea,
+  Separator,
+  Badge,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Skeleton,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  AlertDialog,
+  Checkbox,
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Toaster,
+  Progress,
+  AspectRatio,
+  ScrollArea,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Collapsible,
+  Popover,
+  Tooltip,
+  TooltipProvider,
+  Switch,
+  Slider,
+  Sheet,
+  RadioGroup,
+  HoverCard,
+  Pagination,
+  Table,
+  ContextMenu,
+  Form,
+  Command,
+  Calendar,
+  Menubar,
+  NavigationMenu,
+} from '@gxp-dev/app-ui'
+
+// Domain Components
+import {
+  Spinner,
+  Header,
+  Countdown,
+  VideoPlayer,
+  FileUploader,
+  BarcodeScanner,
+  Leaderboard,
+  ActivityNotifications,
+  AwardIcon,
+  AudioVisualizer,
+} from '@gxp-dev/app-ui'
+
+// Composables
+import {
+  useMedia,
+  useScanning,
+  useAnimations,
+  useErrors,
+  useNfcListener,
+  simulateNfcScan,
+} from '@gxp-dev/app-ui'
+
+// Experience Flow
+import {
+  useExperience,
+  useExperienceApi,
+  withExperienceDefaults,
+  ExperienceFlow,
+  WelcomePage,
+  TermsPage,
+  InstructionsPage,
+  CameraPage,
+  CameraReviewPage,
+  VideoCapturePage,
+  VideoReviewPage,
+  AudioCapturePage,
+  AudioReviewPage,
+  DrawingPage,
+  NotepadPage,
+  TextPage,
+  PromptPage,
+  OptionsPage,
+  FormPage,
+  ResultsGalleryPage,
+  PhotoEditPage,
+  SharePage,
+  LoadingPage,
+  FinalPage,
+} from '@gxp-dev/app-ui'
+
+// Utilities
+import {
+  cn,
+  processUploadedImage,
+  convertToCanvasBlob,
+} from '@gxp-dev/app-ui'
+
+// Types
+import type {
+  ButtonVariants,
+  SpinnerProps,
+  HeaderProps,
+  CountdownProps,
+  VideoPlayerProps,
+  FileUploaderProps,
+  BarcodeScannerProps,
+  LeaderboardProps,
+  LeaderboardEntry,
+  AudioVisualizerProps,
+  UseMediaReturn,
+  UseScanningReturn,
+  UseAnimationsReturn,
+  UseErrorsReturn,
+  UseNfcListenerReturn,
+  // Experience Flow
+  ExperienceApi,
+  ExperienceAction,
+  ExperienceActionFn,
+  ExperienceActionName,
+  ExperienceContext,
+  ExperienceFlowConfig,
+  ExperienceFlowProps,
+  ExperiencePageDef,
+  ExperiencePageDefaults,
+  UseExperienceReturn,
+  UseExperienceApiOptions,
+  CallApi,
+  PublishPostInput,
+  WelcomePageProps,
+  TermsPageProps,
+  InstructionsPageProps,
+  CameraPageProps,
+  CameraReviewPageProps,
+  CameraReviewPagePayload,
+  VideoCapturePageProps,
+  VideoReviewPagePayload,
+  AudioCapturePageProps,
+  AudioReviewPagePayload,
+  DrawingTool,
+  NotepadPagePayload,
+  TextPageProps,
+  PromptTemplateToken,
+  ExperienceOption,
+  FormFieldDef,
+  FormFieldType,
+  FormFieldOption,
+  GalleryResult,
+  BackdropOption,
+  SubjectOption,
+  SharePageMedia,
+  ShareAttribution,
+  ShareMediaType,
+  LoadingPageProps,
+  LoadingTask,
+  FinalPageProps,
+  FinalActionDescriptor,
+} from '@gxp-dev/app-ui'
+```
+
+## Requirements
+
+- Vue 3.4+
+- Node.js 18+
+
+## License
+
+MIT

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/components/domain/audio-visualizer/AudioVisualizer.vue.js

@@ -0,0 +1,106 @@
+import { defineComponent as U, ref as p, computed as j, watch as N, onMounted as W, onBeforeUnmount as G, openBlock as f, createElementBlock as v, normalizeClass as y, unref as B, createElementVNode as w, Fragment as q, renderList as b, normalizeStyle as M } from "vue";
+import { cn as z } from "../../../lib/utils.js";
+const Q = /* @__PURE__ */ U({
+  __name: "AudioVisualizer",
+  props: {
+    active: { type: Boolean, default: !1 },
+    stream: { default: null },
+    mode: { default: "frequency" },
+    waveformData: {},
+    audioSrc: {},
+    timeLimitSeconds: { default: 10 },
+    marksPerSecond: { default: 4 },
+    minHeight: { default: 1 },
+    class: {}
+  },
+  emits: ["ended", "volume-data"],
+  setup(S, { expose: C, emit: H }) {
+    const e = S, k = H, x = p([1, 1, 1, 1, 1]), u = p(null), d = p([]), i = p(e.timeLimitSeconds);
+    let c = null, l = null, s = null, o = null, m;
+    const A = j(
+      () => Math.round((e.timeLimitSeconds - i.value) * e.marksPerSecond)
+    ), L = (t, a, n) => Math.max(Math.min(a, n), t), V = (t) => 100 * (t / 60) ** 0.6, D = (t) => t.reduce((a, n) => a + (n - 128) ** 2, 0) ** 0.5, P = (t, a, n, r) => {
+      const $ = t.slice(a, n).reduce((E, T) => E + T, 0) / (n - a);
+      return e.active ? (1 + $ / 256 * 8) * r : 1;
+    }, R = async () => {
+      if (e.mode === "waveform" && !e.stream && m) {
+        m.play(), o = requestAnimationFrame(() => h(performance.now()));
+        return;
+      }
+      try {
+        if (!e.stream || !e.stream.getAudioTracks().length) return;
+        c = new AudioContext(), l = c.createAnalyser(), c.createMediaStreamSource(e.stream).connect(l), l.fftSize = 64, s = new Uint8Array(new ArrayBuffer(l.frequencyBinCount)), e.mode === "waveform" ? o = requestAnimationFrame(() => h(performance.now())) : o = requestAnimationFrame(F);
+      } catch {
+      }
+    }, g = () => {
+      o && (cancelAnimationFrame(o), o = null), c && (c.close(), c = null), e.mode === "waveform" && (e.stream ? k(
+        "volume-data",
+        d.value.slice(0, Math.round((e.timeLimitSeconds - i.value) * e.marksPerSecond))
+      ) : m && m.pause());
+    }, h = (t) => {
+      const a = performance.now(), n = (a - t) / 1e3;
+      if (i.value = i.value - n, u.value) {
+        const r = getComputedStyle(u.value);
+        u.value.style.left = `${parseFloat(r.left) - n * e.marksPerSecond * (parseFloat(r.gap) + 3)}px`;
+      }
+      if (e.stream && l && s) {
+        l.getByteTimeDomainData(s);
+        const r = L(e.minHeight, V(D(s)), 100);
+        if (d.value[A.value] = Math.round(10 * r) / 10, i.value <= 0) {
+          g();
+          return;
+        }
+      }
+      o = requestAnimationFrame(() => h(a));
+    }, F = () => {
+      !l || !s || (l.getByteFrequencyData(s), x.value = [
+        { range: [0, 2], scale: 0.3 },
+        { range: [2, 6], scale: 0.7 },
+        { range: [4, 12], scale: 1.4 },
+        { range: [2, 6], scale: 0.7 },
+        { range: [0, 2], scale: 0.3 }
+      ].map(({ range: t, scale: a }) => P(s, t[0], t[1], a)), o = requestAnimationFrame(F));
+    }, _ = (t) => ({
+      height: `${(x.value[t - 1] || 1) * 3}px`
+    });
+    return N(
+      () => e.active,
+      (t, a) => {
+        t ? R() : a && g();
+      },
+      { immediate: !0 }
+    ), W(() => {
+      e.mode === "waveform" && (e.stream ? d.value = new Array(e.timeLimitSeconds * e.marksPerSecond).fill(e.minHeight) : (d.value = e.waveformData || [], e.audioSrc && (m = new Audio(e.audioSrc), m.onended = () => {
+        i.value = e.timeLimitSeconds, u.value && (u.value.style.left = "50%"), k("ended");
+      })));
+    }), G(() => g()), C({ counter: i }), (t, a) => S.mode === "waveform" ? (f(), v("div", {
+      key: 0,
+      class: y(B(z)("relative flex h-[20vh] w-full items-center overflow-hidden", e.class))
+    }, [
+      a[0] || (a[0] = w("div", { class: "absolute left-1/2 h-full w-[3px] -translate-x-1/2 rounded-full bg-white" }, null, -1)),
+      w("div", {
+        ref_key: "marksRef",
+        ref: u,
+        class: "absolute left-1/2 flex h-full items-center gap-[5px]"
+      }, [
+        (f(!0), v(q, null, b(d.value, (n, r) => (f(), v("div", {
+          key: r,
+          class: y(["w-[3px] rounded-full bg-white/50 transition-[height] duration-300", { "!opacity-100": A.value > r }]),
+          style: M({ height: `${n}%` })
+        }, null, 6))), 128))
+      ], 512)
+    ], 2)) : (f(), v("div", {
+      key: 1,
+      class: y(B(z)("flex h-8 w-8 items-center justify-center gap-0.5", e.class))
+    }, [
+      (f(), v(q, null, b(5, (n) => w("div", {
+        key: n,
+        class: "min-h-[3px] w-[3px] rounded-sm bg-current transition-[height] duration-100 ease-out",
+        style: M(_(n))
+      }, null, 4)), 64))
+    ], 2));
+  }
+});
+export {
+  Q as default
+};

package/dist/components/domain/audio-visualizer/AudioVisualizer.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AudioVisualizer.vue.js";
+export {
+  f as default
+};

package/dist/components/domain/barcode-scanner/BarcodeScanner.vue.js

@@ -0,0 +1,88 @@
+import { defineComponent as k, ref as f, onMounted as b, onBeforeUnmount as w, openBlock as y, createElementBlock as v, normalizeClass as B, unref as E, Fragment as T, createElementVNode as c, toDisplayString as m, renderSlot as C } from "vue";
+import { cn as M } from "../../../lib/utils.js";
+const _ = { class: "text-sm text-muted-foreground" }, j = /* @__PURE__ */ k({
+  __name: "BarcodeScanner",
+  props: {
+    instructions: { default: "Position the code in front of the camera" },
+    backText: { default: "Back" },
+    scanButtonText: { default: "Start Scanning" },
+    autoStart: { type: Boolean, default: !1 },
+    facingMode: { default: "environment" },
+    readers: { default: () => ["code_128_reader"] },
+    class: {}
+  },
+  emits: ["scan", "error", "scanner-opened", "scanner-closed"],
+  setup(a, { expose: S, emit: h }) {
+    const s = a, r = h, i = f(!1), l = f(!1), u = /* @__PURE__ */ new Set(), p = f(null);
+    let o = null;
+    const d = async () => {
+      i.value = !0, r("scanner-opened");
+      try {
+        const e = (await import("@ericblade/quagga2")).default;
+        o = e, e.init(
+          {
+            inputStream: {
+              type: "LiveStream",
+              constraints: { facingMode: s.facingMode },
+              target: p.value
+            },
+            decoder: { readers: s.readers }
+          },
+          (t) => {
+            if (t) {
+              r("error", t instanceof Error ? t : new Error(String(t)));
+              return;
+            }
+            e.start();
+          }
+        ), e.onDetected((t) => {
+          var x;
+          if (l.value) return;
+          const n = (x = t == null ? void 0 : t.codeResult) == null ? void 0 : x.code;
+          !n || n.trim() === "" || u.has(n) || (l.value = !0, u.add(n), setTimeout(() => u.delete(n), 1e4), r("scan", n), l.value = !1);
+        });
+      } catch (e) {
+        r("error", e instanceof Error ? e : new Error("Failed to load scanner"));
+      }
+    }, g = () => {
+      if (o)
+        try {
+          o.stop();
+        } catch {
+        }
+      i.value = !1, r("scanner-closed");
+    };
+    return b(() => {
+      s.autoStart && d();
+    }), w(() => {
+      if (o)
+        try {
+          o.stop();
+        } catch {
+        }
+    }), S({ startScanning: d, stopScanning: g }), (e, t) => (y(), v("div", {
+      class: B(E(M)("flex w-full flex-col items-center gap-4", s.class))
+    }, [
+      i.value ? (y(), v(T, { key: 0 }, [
+        c("p", _, m(a.instructions), 1),
+        c("div", {
+          ref_key: "viewportRef",
+          ref: p,
+          class: "relative aspect-square w-full max-w-sm overflow-hidden rounded-xl bg-black"
+        }, null, 512),
+        c("button", {
+          class: "inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80",
+          onClick: g
+        }, m(a.backText), 1)
+      ], 64)) : C(e.$slots, "default", { key: 1 }, () => [
+        c("button", {
+          class: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+          onClick: d
+        }, m(a.scanButtonText), 1)
+      ])
+    ], 2));
+  }
+});
+export {
+  j as default
+};