promptslide 0.2.0

package/templates/default/src/globals.css

@@ -0,0 +1,157 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@source "../node_modules/promptslide/src/core";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/*
+  ---
+  Color Theme
+  ---
+  Customize your slide deck colors by editing the OKLCH values below.
+  OKLCH format: oklch(lightness chroma hue)
+  - Lightness: 0 (black) to 1 (white)
+  - Chroma: 0 (gray) to ~0.4 (vivid)
+  - Hue: 0-360 (color wheel angle)
+
+  Change --primary to set your brand color.
+  ---
+*/
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* Primary brand color — change this to match your brand */
+  --primary: {{PRIMARY_COLOR}};
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --radius: 0.625rem;
+
+  --chart-1: {{PRIMARY_COLOR}};
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}
+
+.dark {
+  --background: oklch(0.159 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  /* Primary brand color (dark mode) */
+  --primary: {{PRIMARY_COLOR_DARK}};
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.985 0 0);
+  --secondary-foreground: oklch(0.141 0 0);
+
+  --muted: oklch(0.305 0 0);
+  --muted-foreground: oklch(0.712 0 0);
+
+  --accent: oklch(0.305 0 0);
+  --accent-foreground: oklch(0.925 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --border: oklch(0.269 0 0);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/default/src/layouts/slide-layout-centered.tsx

@@ -0,0 +1,59 @@
+import { useTheme, SlideFooter } from "promptslide";
+
+// =============================================================================
+// SLIDE LAYOUT — CENTERED
+// =============================================================================
+
+interface SlideLayoutCenteredProps {
+  children: React.ReactNode;
+  slideNumber: number;
+  totalSlides: number;
+  title?: string;
+  subtitle?: string;
+  eyebrow?: string;
+  hideFooter?: boolean;
+}
+
+export function SlideLayoutCentered({
+  children,
+  slideNumber,
+  totalSlides,
+  title,
+  subtitle,
+  eyebrow,
+  hideFooter = false,
+}: SlideLayoutCenteredProps) {
+  const theme = useTheme();
+  const headingFont = theme?.fonts?.heading
+    ? { fontFamily: theme.fonts.heading }
+    : undefined;
+
+  return (
+    <div className="bg-background text-foreground relative flex h-full w-full flex-col overflow-hidden px-12 pt-10 pb-6">
+      {/* Header */}
+      {(title || eyebrow) && (
+        <div className="mb-6 shrink-0">
+          {eyebrow && (
+            <div className="text-primary mb-2 text-xs font-bold tracking-[0.2em] uppercase">
+              {eyebrow}
+            </div>
+          )}
+          {title && (
+            <h2 className="text-foreground text-4xl font-bold tracking-tight" style={headingFont}>
+              {title}
+            </h2>
+          )}
+          {subtitle && <p className="text-muted-foreground mt-2 max-w-4xl text-lg">{subtitle}</p>}
+        </div>
+      )}
+
+      {/* Content Area */}
+      <div className="min-h-0 w-full flex-1 overflow-hidden pt-2">{children}</div>
+
+      {/* Footer */}
+      {!hideFooter && (
+        <SlideFooter slideNumber={slideNumber} totalSlides={totalSlides} />
+      )}
+    </div>
+  );
+}

package/templates/default/src/slides/slide-example.tsx

@@ -0,0 +1,53 @@
+import { Lightbulb, Rocket, Zap } from "lucide-react";
+
+import { Animated, AnimatedGroup } from "promptslide";
+import type { SlideProps } from "promptslide";
+import { SlideLayoutCentered } from "@/layouts/slide-layout-centered";
+
+export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
+  return (
+    <SlideLayoutCentered
+      slideNumber={slideNumber}
+      totalSlides={totalSlides}
+      eyebrow="EXAMPLE"
+      title="Click to Reveal Content"
+      subtitle="This slide demonstrates step animations. Click or press Space to advance."
+    >
+      <div className="flex h-full flex-col justify-center">
+        <Animated step={1} animation="fade">
+          <p className="text-muted-foreground mb-8 text-lg">
+            Each element appears on click. Edit this slide or create new ones in{" "}
+            <code className="text-primary font-mono text-sm">src/slides/</code>
+          </p>
+        </Animated>
+
+        <AnimatedGroup
+          startStep={2}
+          animation="slide-up"
+          staggerDelay={0.1}
+          className="grid grid-cols-3 gap-6"
+        >
+          <div className="rounded-xl border border-border bg-card p-6">
+            <Lightbulb className="text-primary mb-3 h-8 w-8" />
+            <h3 className="text-foreground mb-1 font-semibold">Idea</h3>
+            <p className="text-muted-foreground text-sm">
+              Describe your slides in natural language
+            </p>
+          </div>
+          <div className="rounded-xl border border-border bg-card p-6">
+            <Zap className="text-primary mb-3 h-8 w-8" />
+            <h3 className="text-foreground mb-1 font-semibold">Build</h3>
+            <p className="text-muted-foreground text-sm">
+              Your coding agent creates the components
+            </p>
+          </div>
+          <div className="rounded-xl border border-border bg-card p-6">
+            <Rocket className="text-primary mb-3 h-8 w-8" />
+            <h3 className="text-foreground mb-1 font-semibold">Present</h3>
+            <p className="text-muted-foreground text-sm">Press F to go fullscreen and present</p>
+          </div>
+        </AnimatedGroup>
+      </div>
+    </SlideLayoutCentered>
+  );
+}

package/templates/default/src/slides/slide-title.tsx

@@ -0,0 +1,27 @@
+import { Presentation } from "lucide-react";
+
+import type { SlideProps } from "promptslide";
+import { SlideLayoutCentered } from "@/layouts/slide-layout-centered";
+
+export function SlideTitle({ slideNumber, totalSlides }: SlideProps) {
+  return (
+    <SlideLayoutCentered slideNumber={slideNumber} totalSlides={totalSlides} hideFooter>
+      <div className="relative flex h-full w-full flex-col items-center justify-center text-center">
+        <Presentation className="text-primary mb-6 h-16 w-16" />
+
+        <h1 className="text-foreground max-w-5xl text-5xl font-bold tracking-tight md:text-7xl lg:text-8xl">
+          {"{{PROJECT_NAME}}"}
+        </h1>
+
+        <p className="text-muted-foreground mt-6 max-w-3xl text-xl font-light md:text-2xl">
+          A presentation built with PromptSlide
+        </p>
+
+        <div className="text-muted-foreground mt-16 text-sm">
+          Press <kbd className="rounded bg-card px-2 py-0.5 font-mono text-xs">Space</kbd> or{" "}
+          <kbd className="rounded bg-card px-2 py-0.5 font-mono text-xs">&rarr;</kbd> to navigate
+        </div>
+      </div>
+    </SlideLayoutCentered>
+  );
+}

package/templates/default/src/theme.ts

@@ -0,0 +1,8 @@
+import type { ThemeConfig } from "@promptslide/core";
+
+export const theme: ThemeConfig = {
+  name: "{{PROJECT_NAME}}",
+  logo: {
+    full: "/logo.svg",
+  },
+};