@starrykit/slides-editor 0.1.26

package/dist/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/lib/block-snap-guides.d.ts

@@ -0,0 +1,6 @@
+import type { StageRect } from "@starrykit/slides-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/lib/block-snap-targets.d.ts

@@ -0,0 +1,13 @@
+import type { SlideModel, StageGeometry, StageRect } from "@starrykit/slides-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/lib/block-snap-types.d.ts

@@ -0,0 +1,32 @@
+import type { StageRect } from "@starrykit/slides-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";
+export type ResizeHandleEdge = "top-center" | "right-center" | "bottom-center" | "left-center";
+export type ResizeHandlePosition = ResizeHandleCorner | ResizeHandleEdge;

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

@@ -0,0 +1,17 @@
+import type { StageRect } from "@starrykit/slides-core";
+export { collectSnapTargets } from "./block-snap-targets";
+import type { ResizeHandlePosition, 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, resizeHandle: ResizeHandlePosition, targets: {
+    vertical: SnapTarget[];
+    horizontal: SnapTarget[];
+}): {
+    rect: StageRect;
+    guides: SnapGuide[];
+};

package/dist/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/lib/editor-selection-operations.d.ts

@@ -0,0 +1,58 @@
+import type { AtomicSlideOperation, ElementInsertOperation, ElementLayoutUpdateOperation, ElementPresentationStyleMap, ElementRemoveOperation, GroupElementRectMap, SlideBatchOperation, SlideModel, StageRect, StyleUpdateOperation } from "@starrykit/slides-core";
+export declare function batchSelectionOperation(slideId: string, operations: AtomicSlideOperation[]): AtomicSlideOperation | SlideBatchOperation | null;
+export declare function createLayerOperations(slide: SlideModel, elementIds: string[], action: string): StyleUpdateOperation[];
+export declare function createDuplicateSelectionOperations({ slide, elementIds, doc, }: {
+    slide: SlideModel;
+    elementIds: string[];
+    doc: Document | null | undefined;
+}): {
+    operations: ElementInsertOperation[];
+    nextElementIds: string[];
+};
+export declare function createRemoveSelectionOperations(slide: SlideModel, elementIds: string[]): ElementRemoveOperation[];
+export declare function createGroupOperation({ slide, elementIds, elementRects, }: {
+    slide: SlideModel;
+    elementIds: string[];
+    elementRects: GroupElementRectMap;
+}): {
+    operation: import("@starrykit/slides-core").GroupCreateOperation;
+    groupElementId: string;
+} | null;
+export declare function createUngroupOperation({ slide, elementId, elementRects, elementPresentationStyles, parentPosition, }: {
+    slide: SlideModel;
+    elementId: string;
+    elementRects: GroupElementRectMap;
+    elementPresentationStyles: ElementPresentationStyleMap;
+    parentPosition?: {
+        x: number;
+        y: number;
+    };
+}): import("@starrykit/slides-core").GroupUngroupOperation | null;
+export declare function createGroupElementRectMap({ doc, slide, flattenRootElementId, }: {
+    doc: Document | null | undefined;
+    slide: SlideModel | undefined;
+    flattenRootElementId?: string;
+}): GroupElementRectMap;
+export declare function createElementPresentationStyleMap({ doc, elementId, }: {
+    doc: Document | null | undefined;
+    elementId: string;
+}): ElementPresentationStyleMap;
+export declare function createArrangeTransformValue({ action, elementId, slide, selectionOverlay, stage, }: {
+    action: string;
+    elementId: string;
+    slide: SlideModel;
+    selectionOverlay: StageRect;
+    stage: {
+        offsetX: number;
+        offsetY: number;
+        scale: number;
+        width: number;
+        height: number;
+    };
+}): string | null;
+export declare function createDistributeOperations({ slide, elementIds, doc, action, }: {
+    slide: SlideModel;
+    elementIds: string[];
+    doc: Document | null | undefined;
+    action: string;
+}): ElementLayoutUpdateOperation[];

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

@@ -0,0 +1,7 @@
+export declare function hasDirectEditableChildren(html: string, elementId: string): boolean;
+export declare function createStructuralListIdMap(doc: Document, flattenRootElementId: string | undefined): Map<Element, string>;
+export declare function isListWrapperWithEditableItems(node: Element): node is HTMLElement;
+export declare function getScopedTextTargetAtPoint(doc: Document, activeGroupScopeId: string, point: {
+    x: number;
+    y: number;
+}): HTMLElement | null;

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

@@ -0,0 +1,17 @@
+import type { CssPropertyRow } from "./collect-css-properties";
+import type { ElementToolFeature } from "./element-tool-model";
+export interface ElementToolAttributeValues {
+    locked: 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/lib/element-tool-model.d.ts

@@ -0,0 +1,17 @@
+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_WIDTH_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/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-color" | "border-width" | "border-radius" | "box-shadow" | "width" | "height" | "opacity" | "rotation" | "image-crop" | "align-to-slide" | "distribute" | "layer-order" | "group" | "ungroup" | "locked" | "link-url" | "aria-label" | "custom-css" | "other-tools" | "other-link" | "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/lib/element-tool-values.d.ts

@@ -0,0 +1,22 @@
+import type { CssPropertyRow } from "./collect-css-properties";
+import type { ElementToolFeature, ElementToolOption } from "./element-tool-model";
+interface ElementToolValueOptions {
+    feature: ElementToolFeature;
+    inspectedStyles: CssPropertyRow[];
+    attributeValues: {
+        locked: 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/lib/image-crop.d.ts

@@ -0,0 +1,24 @@
+import type { RectLike } from "@starrykit/slides-core";
+export interface CropInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface CropRadii {
+    topLeft: string;
+    topRight: string;
+    bottomRight: string;
+    bottomLeft: string;
+}
+export declare const DEFAULT_CROP_INSETS: CropInsets;
+export declare const DEFAULT_CROP_RADII: CropRadii;
+export declare function clampCropInset(value: number, min: number, max: number): number;
+export declare function parseInsetClipPath(value: string): CropInsets;
+export declare function formatInsetClipPath(insets: CropInsets): string;
+export declare function formatRoundedInsetClipPath(insets: CropInsets, radii: CropRadii): string;
+export declare function areCropInsetsEqual(left: CropInsets, right: CropInsets): boolean;
+export declare function cropRectByInsets<T extends RectLike>(rect: T, insets: CropInsets): T;
+export declare function getImageCropInsets(node: HTMLElement): CropInsets;
+export declare function getImageCropRadii(node: HTMLElement): CropRadii;
+export declare function getVisibleImageRect(node: HTMLElement): RectLike;

package/dist/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/lib/selection-overlay.d.ts

@@ -0,0 +1,4 @@
+import type { StageRect } from "@starrykit/slides-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/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/lib/thumbnail-renderer.d.ts

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

package/dist/lib/utils.d.ts

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

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@starrykit/slides-editor",
+  "version": "0.1.26",
+  "description": "Embeddable React editor UI for Starry Slides — host-driven through props and callbacks.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && tsup src/index.tsx --format esm --external react --external react-dom"
+  },
+  "dependencies": {
+    "@starrykit/slides-core": "0.1.26",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "html-to-image": "^1.11.11",
+    "lucide-react": "^1.14.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "radix-ui": "^1.4.3",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,88 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* ADR-0008: src/editor owns the Tailwind/shadcn theme inside @starrykit/slides. */
+@source "./..";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
+  --font-mono: "SFMono-Regular", "Menlo", monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(0.985 0.002 95);
+  --foreground: oklch(0.22 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--foreground);
+  --primary: var(--foreground);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.96 0 0);
+  --secondary-foreground: var(--foreground);
+  --muted: oklch(0.94 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.94 0 0);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(0.58 0.22 27);
+  --border: oklch(0.22 0 0 / 0.08);
+  --input: oklch(0.22 0 0 / 0.12);
+  --ring: oklch(0.22 0 0 / 0.24);
+  --radius: 0.5rem;
+}
+
+@layer base {
+  html,
+  body,
+  #root {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    line-height: 1.5;
+    font-weight: 400;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  input,
+  textarea,
+  [contenteditable="true"],
+  [contenteditable="plaintext-only"] {
+    user-select: text;
+    -webkit-user-select: text;
+  }
+}