starry-slides 0.1.0

package/dist/editor/lib/block-snap-constants.d.ts

@@ -0,0 +1,8 @@
+export declare const SNAP_THRESHOLD_PX = 18;
+export declare const SPACING_SNAP_DISTANCE_BONUS_PX = 6;
+export declare const SNAP_GUIDE_EXTENSION_PX = 24;
+export declare const SNAP_GUIDE_COLOR = "#ef4444";
+export declare const SPACING_ALIGNMENT_TOLERANCE_PX = 40;
+export declare const MIN_SPACING_TARGET_GAP_PX = 12;
+export declare const MAX_SPACING_TARGET_GAP_PX = 360;
+export declare function rangesOverlapOrNear(startA: number, endA: number, startB: number, endB: number, proximity: number): boolean;

package/dist/editor/lib/block-snap-guides.d.ts

@@ -0,0 +1,6 @@
+import type { StageRect } from "../../core";
+import type { SnapCandidate, SnapGuide } from "./block-snap-types";
+export declare function buildSnapGuides(rect: StageRect, snap: {
+    vertical: SnapCandidate | null;
+    horizontal: SnapCandidate | null;
+}): SnapGuide[];

package/dist/editor/lib/block-snap-targets.d.ts

@@ -0,0 +1,13 @@
+import type { SlideModel, StageGeometry, StageRect } from "../../core";
+import type { SnapTarget } from "./block-snap-types";
+export declare function collectSnapTargets({ activeSlide, doc, rootRect, selectedElementId, slideStageRect, stageGeometry, }: {
+    activeSlide: SlideModel;
+    doc: Document;
+    rootRect: DOMRect;
+    selectedElementId: string;
+    slideStageRect: StageRect;
+    stageGeometry: StageGeometry;
+}): {
+    vertical: SnapTarget[];
+    horizontal: SnapTarget[];
+};

package/dist/editor/lib/block-snap-types.d.ts

@@ -0,0 +1,30 @@
+import type { StageRect } from "../../core";
+export interface SnapGuide {
+    orientation: "vertical" | "horizontal";
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+    variant: "alignment" | "spacing";
+}
+export interface SnapTarget {
+    position: number;
+    rect: StageRect;
+    kind: "slide" | "element" | "spacing";
+    role: "start" | "center" | "end";
+    anchor: SnapCandidate["anchor"] | null;
+    priority: number;
+    spacingPriority?: number;
+    elementId: string | null;
+    relatedRects: StageRect[];
+}
+export interface SnapCandidate {
+    anchor: "start" | "center" | "end";
+    delta: number;
+    target: SnapTarget;
+}
+export type ResizeHandleCorner = "top-left" | "top-right" | "bottom-right" | "bottom-left";

package/dist/editor/lib/block-snapping.d.ts

@@ -0,0 +1,17 @@
+import type { StageRect } from "../../core";
+export { collectSnapTargets } from "./block-snap-targets";
+import type { ResizeHandleCorner, SnapGuide, SnapTarget } from "./block-snap-types";
+export declare function snapStageRect(rect: StageRect, targets: {
+    vertical: SnapTarget[];
+    horizontal: SnapTarget[];
+}): {
+    rect: StageRect;
+    guides: SnapGuide[];
+};
+export declare function snapResizeRect(rect: StageRect, resizeCorner: ResizeHandleCorner, targets: {
+    vertical: SnapTarget[];
+    horizontal: SnapTarget[];
+}): {
+    rect: StageRect;
+    guides: SnapGuide[];
+};

package/dist/editor/lib/collect-css-properties.d.ts

@@ -0,0 +1,5 @@
+export interface CssPropertyRow {
+    name: string;
+    value: string;
+}
+export declare function collectCssProperties(element: HTMLElement): CssPropertyRow[];

package/dist/editor/lib/element-tool-commit.d.ts

@@ -0,0 +1,18 @@
+import type { CssPropertyRow } from "./collect-css-properties";
+import type { ElementToolFeature } from "./element-tool-model";
+export interface ElementToolAttributeValues {
+    locked: string;
+    altText: string;
+    ariaLabel: string;
+    linkUrl: string;
+}
+export declare function commitElementToolFeature({ attributeValues, feature, inspectedStyles, nextValue, onAlignToSlide, onAttributeChange, onLayerOrder, onStyleChange, }: {
+    attributeValues: ElementToolAttributeValues;
+    feature: ElementToolFeature;
+    inspectedStyles: CssPropertyRow[];
+    nextValue: string;
+    onStyleChange: (propertyName: string, nextValue: string) => void;
+    onAttributeChange: (attributeName: string, nextValue: string) => void;
+    onAlignToSlide: (action: string) => void;
+    onLayerOrder: (action: string) => void;
+}): void;

package/dist/editor/lib/element-tool-model.d.ts

@@ -0,0 +1,16 @@
+import type { ElementToolFeatureId, ElementToolGroup, ElementToolOption } from "./element-tool-types";
+export type { ElementToolControlType, ElementToolFeature, ElementToolFeatureId, ElementToolGroup, ElementToolOption, ElementToolSubgroup, } from "./element-tool-types";
+export declare const TEXT_ALIGN_OPTIONS: ElementToolOption[];
+export declare const ALIGN_TO_SLIDE_OPTIONS: ElementToolOption[];
+export declare const LAYER_ORDER_OPTIONS: ElementToolOption[];
+export declare const DISTRIBUTE_OPTIONS: ElementToolOption[];
+export declare const FONT_SIZE_TOOL_OPTIONS: ElementToolOption[];
+export declare const LINE_HEIGHT_OPTIONS: ElementToolOption[];
+export declare const SIZE_PRESET_OPTIONS: ElementToolOption[];
+export declare const OPACITY_OPTIONS: ElementToolOption[];
+export declare const ROTATION_OPTIONS: ElementToolOption[];
+export declare const BORDER_STYLE_OPTIONS: ElementToolOption[];
+export declare const BORDER_RADIUS_OPTIONS: ElementToolOption[];
+export declare const SHADOW_OPTIONS: ElementToolOption[];
+export declare const ELEMENT_TOOL_GROUPS: ElementToolGroup[];
+export declare function getElementToolFeature(featureId: ElementToolFeatureId): import("./element-tool-types").ElementToolFeature | null;

package/dist/editor/lib/element-tool-types.d.ts

@@ -0,0 +1,35 @@
+import type { LucideIcon } from "lucide-react";
+export type ElementToolFeatureId = "font-family" | "font-size" | "font-bold" | "font-italic" | "font-underline" | "font-strikethrough" | "line-height" | "text-align" | "text-color" | "background-color" | "border" | "border-radius" | "box-shadow" | "width" | "height" | "opacity" | "rotation" | "align-to-slide" | "distribute" | "layer-order" | "group" | "ungroup" | "locked" | "link-url" | "alt-text" | "aria-label" | "custom-css" | "other-tools" | "other-link" | "other-alt-text" | "other-aria-label";
+export type ElementToolControlType = "select" | "number" | "toggle" | "color" | "text" | "slider" | "action-group" | "custom-css";
+export interface ElementToolOption {
+    label: string;
+    value: string;
+    icon?: LucideIcon;
+    description?: string;
+}
+export interface ElementToolFeature {
+    id: ElementToolFeatureId;
+    label: string;
+    controlType: ElementToolControlType;
+    target: "style" | "attribute" | "operation";
+    propertyName?: string;
+    attributeName?: string;
+    options?: ElementToolOption[];
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    placeholder?: string;
+}
+export interface ElementToolSubgroup {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    features: ElementToolFeature[];
+}
+export interface ElementToolGroup {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    subgroups: ElementToolSubgroup[];
+}

package/dist/editor/lib/element-tool-values.d.ts

@@ -0,0 +1,23 @@
+import type { CssPropertyRow } from "./collect-css-properties";
+import type { ElementToolFeature, ElementToolOption } from "./element-tool-model";
+interface ElementToolValueOptions {
+    feature: ElementToolFeature;
+    inspectedStyles: CssPropertyRow[];
+    attributeValues: {
+        locked: string;
+        altText: string;
+        ariaLabel: string;
+        linkUrl: string;
+    };
+}
+export declare function getElementToolValue({ feature, inspectedStyles, attributeValues, }: ElementToolValueOptions): string;
+export declare function normalizeFeatureCommitValue(feature: ElementToolFeature, nextValue: string): string;
+export declare function getSteppedFeatureValue({ currentValue, feature, direction, }: {
+    currentValue: string;
+    feature: ElementToolFeature;
+    direction: "decrease" | "increase";
+}): string;
+export declare function getTextDecorationCommitValue(currentValue: string, line: "underline" | "line-through", active: boolean): string;
+export declare function isFeatureActive(feature: ElementToolFeature, currentValue: string): boolean;
+export declare function getFeatureOptions(feature: ElementToolFeature, currentValue: string): ElementToolOption[];
+export {};

package/dist/editor/lib/motion.d.ts

@@ -0,0 +1,8 @@
+declare const EDITOR_MOTION_MS = 200;
+declare const editorMotionClassName = "motion-safe:duration-200 motion-safe:ease-out";
+declare const editorMotionFastClassName = "motion-safe:duration-150 motion-safe:ease-out";
+declare const editorMotionTransitionClassName = "motion-safe:transition-[flex-basis,width,max-width,opacity] motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none";
+declare const editorMotionFastTransitionClassName = "motion-safe:transition-[background-color,border-color,color,box-shadow,gap,opacity,outline-color] motion-safe:duration-150 motion-safe:ease-out motion-reduce:transition-none";
+declare const editorPanelEnterClassName = "motion-safe:animate-in motion-safe:fade-in-0 motion-reduce:animate-none";
+declare const editorPanelExitClassName = "motion-safe:animate-out motion-safe:fade-out-0 motion-reduce:animate-none";
+export { EDITOR_MOTION_MS, editorMotionClassName, editorMotionFastClassName, editorMotionTransitionClassName, editorMotionFastTransitionClassName, editorPanelEnterClassName, editorPanelExitClassName, };

package/dist/editor/lib/selection-overlay.d.ts

@@ -0,0 +1,4 @@
+import type { StageRect } from "../../core";
+export declare const SELECTION_OVERLAY_PADDING_X = 8;
+export declare const SELECTION_OVERLAY_PADDING_Y = 14;
+export declare function expandSelectionOverlay(stageRect: StageRect): StageRect;

package/dist/editor/lib/style-controls.d.ts

@@ -0,0 +1,17 @@
+import type { CssPropertyRow } from "./collect-css-properties";
+export type TextAlign = "left" | "center" | "right";
+export interface FontFamilyOption {
+    label: string;
+    value: string;
+}
+export declare const FONT_FAMILY_OPTIONS: FontFamilyOption[];
+export declare const FONT_SIZE_OPTIONS: number[];
+export declare function getStyleValue(styles: CssPropertyRow[], propertyName: string): string;
+export declare function parsePixelValue(value: string, fallback: number): number;
+export declare function roundCssPixel(value: number): string;
+export declare function getFontFamilyLabel(value: string): string;
+export declare function isFontFamilySelected(currentValue: string, optionValue: string): boolean;
+export declare function isBoldFontWeight(value: string): boolean;
+export declare function parseTextDecorationLines(value: string): Set<string>;
+export declare function getColorInputValue(value: string): string;
+export declare function isHexColor(value: string): boolean;

package/dist/editor/lib/thumbnail-renderer.d.ts

@@ -0,0 +1,2 @@
+import type { SlideModel } from "../../core";
+export declare function renderSlideThumbnail(slide: SlideModel): Promise<string>;

package/dist/editor/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+declare function cn(...inputs: ClassValue[]): string;
+export { cn };

package/dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Starry Slides</title>
+    <script type="module" crossorigin src="/assets/index-C1Rjncf1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CtfA3BPy.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/node/deck-runtime-middleware.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from "vite";
+interface DeckRuntimeMiddlewareOptions {
+    runtimeDeckDir: string;
+    previewDeckDir: string;
+    saveTargetDirs: string[];
+}
+export declare function createDeckRuntimeMiddlewarePlugin({ runtimeDeckDir, previewDeckDir, saveTargetDirs, }: DeckRuntimeMiddlewareOptions): Plugin;
+export {};

package/dist/node/deck-source.d.ts

@@ -0,0 +1 @@
+export declare function resolveDeckPath(deckPath: string | undefined): string;

package/dist/node/html-export.d.ts

@@ -0,0 +1,16 @@
+export interface HtmlExportResultSlide {
+    index: number;
+    slideFile: string;
+    title?: string;
+}
+export interface HtmlExportResult {
+    deck: string;
+    mode: "all";
+    outFile: string;
+    path: string;
+    slides: HtmlExportResultSlide[];
+}
+export declare function exportHtml({ deckPath, outFile, }: {
+    deckPath: string;
+    outFile: string;
+}): Promise<HtmlExportResult>;

package/dist/node/open-browser.d.ts

@@ -0,0 +1 @@
+export declare function openBrowser(url: string): void;

package/dist/node/pdf-export.d.ts

@@ -0,0 +1,20 @@
+import { type PdfExportSelection } from "../core";
+export interface PdfExportSlide {
+    index: number;
+    slideFile: string;
+    title?: string;
+    width: number;
+    height: number;
+}
+export interface PdfExportResult {
+    deck: string;
+    mode: "all" | "single" | "slides";
+    outFile: string;
+    path: string;
+    slides: PdfExportSlide[];
+}
+export declare function exportPdf({ deckPath, outFile, selection, }: {
+    deckPath: string;
+    outFile: string;
+    selection?: PdfExportSelection;
+}): Promise<PdfExportResult>;

package/dist/node/ports.d.ts

@@ -0,0 +1 @@
+export declare function findAvailablePort(preferredPort?: number): Promise<number>;

package/dist/node/view-renderer.d.ts

@@ -0,0 +1,31 @@
+import { type VerifyIssue } from "../core/verify-deck";
+export interface RenderedSlide {
+    index: number;
+    file: string;
+    title?: string;
+    hidden?: boolean;
+    filePath: string;
+}
+export interface PreviewRender {
+    index: number;
+    slideFile: string;
+    title?: string;
+    file: string;
+    path: string;
+    width: number;
+    height: number;
+    scale: 1;
+}
+export interface PreviewManifest {
+    deck: string;
+    mode: "single" | "all";
+    outputDir: string;
+    slides: PreviewRender[];
+}
+export declare function getManifestSlides(deckPath: string): RenderedSlide[];
+export declare function verifyRenderedOverflow(deckPath: string): Promise<VerifyIssue[]>;
+export declare function renderPreviewManifest({ deckPath, slideFile, outDir, }: {
+    deckPath: string;
+    slideFile?: string;
+    outDir?: string;
+}): Promise<PreviewManifest>;

package/dist/runtime/deck-source.d.ts

@@ -0,0 +1 @@
+export declare function resolveDeckPath(deckPath: string | undefined): string;

package/dist/runtime/html-export.d.ts

@@ -0,0 +1,16 @@
+export interface HtmlExportResultSlide {
+    index: number;
+    slideFile: string;
+    title?: string;
+}
+export interface HtmlExportResult {
+    deck: string;
+    mode: "all";
+    outFile: string;
+    path: string;
+    slides: HtmlExportResultSlide[];
+}
+export declare function exportHtml({ deckPath, outFile, }: {
+    deckPath: string;
+    outFile: string;
+}): Promise<HtmlExportResult>;

package/dist/runtime/open-browser.d.ts

@@ -0,0 +1 @@
+export declare function openBrowser(url: string): void;

package/dist/runtime/pdf-export.d.ts

@@ -0,0 +1,20 @@
+import { type PdfExportSelection } from "../core";
+export interface PdfExportSlide {
+    index: number;
+    slideFile: string;
+    title?: string;
+    width: number;
+    height: number;
+}
+export interface PdfExportResult {
+    deck: string;
+    mode: "all" | "single" | "slides";
+    outFile: string;
+    path: string;
+    slides: PdfExportSlide[];
+}
+export declare function exportPdf({ deckPath, outFile, selection, }: {
+    deckPath: string;
+    outFile: string;
+    selection?: PdfExportSelection;
+}): Promise<PdfExportResult>;

package/dist/runtime/ports.d.ts

@@ -0,0 +1 @@
+export declare function findAvailablePort(preferredPort?: number): Promise<number>;

package/dist/runtime/view-renderer.d.ts

@@ -0,0 +1,31 @@
+import { type VerifyIssue } from "../core/verify-deck";
+export interface RenderedSlide {
+    index: number;
+    file: string;
+    title?: string;
+    hidden?: boolean;
+    filePath: string;
+}
+export interface PreviewRender {
+    index: number;
+    slideFile: string;
+    title?: string;
+    file: string;
+    path: string;
+    width: number;
+    height: number;
+    scale: 1;
+}
+export interface PreviewManifest {
+    deck: string;
+    mode: "single" | "all";
+    outputDir: string;
+    slides: PreviewRender[];
+}
+export declare function getManifestSlides(deckPath: string): RenderedSlide[];
+export declare function verifyRenderedOverflow(deckPath: string): Promise<VerifyIssue[]>;
+export declare function renderPreviewManifest({ deckPath, slideFile, outDir, }: {
+    deckPath: string;
+    slideFile?: string;
+    outDir?: string;
+}): Promise<PreviewManifest>;

package/dist/runtime/view-renderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/deck-fixtures.d.ts

@@ -0,0 +1,14 @@
+export interface TestDeck {
+    root: string;
+    cleanup: () => void;
+}
+export declare function createTempDeck(prefix?: string): TestDeck;
+export declare function writeDeck(deck: string, slides: Array<{
+    file: string;
+    title?: string;
+    html?: string;
+}>): void;
+export declare function slideHtml(content?: string, rootStyle?: string): string;
+export declare function slideHtmlWithoutDimensions(content?: string): string;
+export declare function textElement(id: string, text: string, style?: string): string;
+export declare function blockElement(id: string, text: string, style?: string): string;

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "starry-slides",
+  "version": "0.1.0",
+  "description": "Local-first CLI and browser editor for HTML slide decks.",
+  "license": "AGPL-3.0-only",
+  "type": "module",
+  "packageManager": "pnpm@10.33.2",
+  "homepage": "https://github.com/StarryKit/starry-slides#readme",
+  "bugs": {
+    "url": "https://github.com/StarryKit/starry-slides/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/StarryKit/starry-slides.git"
+  },
+  "keywords": [
+    "slides",
+    "presentation",
+    "html",
+    "cli",
+    "editor"
+  ],
+  "engines": {
+    "node": ">=20.11"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "bin": {
+    "starry-slides": "dist/cli/index.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/editor/index.d.ts",
+      "import": "./dist/editor/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "starry-slides": "tsx src/cli/index.ts",
+    "build": "pnpm build:types && pnpm build:js && pnpm build:app",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build:js": "tsup src/editor/index.tsx src/cli/index.ts --format esm",
+    "build:app": "vite build",
+    "editor:e2e:generate-deck": "node e2e/tools/prepare-regression-deck.mjs --app-out-dir sample-slides",
+    "prepare:regression-deck": "node e2e/tools/prepare-regression-deck.mjs",
+    "starry:contract:create-style-pack": "node skills/starry-slides-skill/tools/contract-protocol/create-style-pack.mjs",
+    "starry:contract:validate": "pnpm starry-slides verify",
+    "starry:contract:annotate": "node skills/starry-slides-skill/tools/contract-protocol/annotate-slides.mjs",
+    "starry:contract:manifest": "node skills/starry-slides-skill/tools/contract-protocol/build-manifest.mjs",
+    "starry:open": "pnpm starry-slides open",
+    "test:e2e:prepare": "pnpm prepare:regression-deck",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write .",
+    "test": "vitest run",
+    "test:packaged-cli": "vitest run --config vitest.packaged-cli.config.ts",
+    "test:e2e:serve": "pnpm test:e2e:prepare && pnpm build && STARRY_SLIDES_DECK_SOURCE=e2e pnpm exec vite preview --host 127.0.0.1 --port 4173 --strictPort",
+    "test:e2e": "playwright test",
+    "verify": "pnpm lint && pnpm test && pnpm build && pnpm test:packaged-cli && pnpm test:e2e"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.54.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "html-to-image": "^1.11.11",
+    "jsdom": "^26.1.0",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@tailwindcss/cli": "^4.2.4",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "tailwindcss": "^4.2.4",
+    "tsup": "^8.5.1",
+    "tsx": "^4.20.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4"
+  }
+}