@fraczled/sdk 1.0.1

package/index.d.ts

@@ -0,0 +1,368 @@
+// @fraczled/sdk Type Declarations
+
+export type Unit = 'px' | 'in' | 'mm' | 'pt';
+
+export interface DocumentSettings {
+  width: number;
+  height: number;
+  unit: Unit;
+  dpi: number;
+  bleed: number;
+  safeArea: number;
+  backgroundColor: string;
+  showBleed: boolean;
+  showSafeArea: boolean;
+}
+
+export type EffectStyleType =
+  | 'none'
+  | 'shadow'
+  | 'lift'
+  | 'hollow'
+  | 'splice'
+  | 'outline'
+  | 'echo'
+  | 'glitch'
+  | 'neon'
+  | 'background'
+  | 'blur'
+  | 'gradient_overlay'
+  | 'duotone'
+  | 'reflection';
+export type EffectShapeType = 'none' | 'curve';
+
+export interface EffectStyle {
+  type: EffectStyleType;
+  params: {
+    offset?: number;
+    direction?: number;
+    blur?: number;
+    transparency?: number;
+    thickness?: number;
+    color?: string;
+    intensity?: number;
+    roundness?: number;
+    spread?: number;
+    blurAmount?: number;
+    gradientColor1?: string;
+    gradientColor2?: string;
+    gradientAngle?: number;
+    duotoneLight?: string;
+    duotoneDark?: string;
+    reflectionOpacity?: number;
+    reflectionDistance?: number;
+  };
+}
+
+export interface EffectShape {
+  type: EffectShapeType;
+  params: {
+    curve: number;
+  };
+}
+
+export interface EffectAdjustments {
+  hue?: number;
+  saturation?: number;
+  brightness?: number;
+  contrast?: number;
+}
+
+export interface EffectSettings {
+  style: EffectStyle;
+  shape: EffectShape;
+  adjustments?: EffectAdjustments;
+}
+
+export type QRDotsType = 'square' | 'dots' | 'rounded' | 'classy' | 'classy-rounded' | 'extra-rounded';
+export type QRCornerSquareType = 'square' | 'dot' | 'extra-rounded';
+export type QRCornerDotType = 'square' | 'dot';
+
+export type CornerRadius = number | { tl: number; tr: number; bl: number; br: number };
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Handle {
+  x: number;
+  y: number;
+}
+
+export type AnchorType = 'corner' | 'smooth' | 'symmetric';
+
+export interface AnchorPoint {
+  id: string;
+  position: Point;
+  handleIn: Handle | null;
+  handleOut: Handle | null;
+  type: AnchorType;
+}
+
+export interface VectorPath {
+  id: string;
+  anchors: AnchorPoint[];
+  closed: boolean;
+  strokeColor: string;
+  strokeWidth: number;
+  fillColor: string | null;
+  lineCap: 'butt' | 'round' | 'square';
+  lineJoin: 'miter' | 'round' | 'bevel';
+}
+
+export interface CanvasElement {
+  id: string;
+  name: string;
+  type: 'text' | 'shape' | 'image' | 'qrcode' | 'path';
+  content: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+  opacity: number;
+  visible: boolean;
+  color?: string;
+  backgroundColor?: string;
+  groupId?: string;
+  flipX?: boolean;
+  flipY?: boolean;
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  letterSpacing?: number;
+  lineHeight?: number;
+  autoWidth?: boolean;
+  strokeWidth?: number;
+  strokeColor?: string;
+  strokeStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
+  textStrokeWidth?: number;
+  textStrokeColor?: string;
+  textStrokePosition?: 'behind' | 'front';
+  textStrokeStyle?: 'round' | 'flat';
+  cornerRadius?: CornerRadius;
+  clipShape?: string;
+  crop?: {
+    x: number;
+    y: number;
+    scale: number;
+  };
+  qrMargin?: number;
+  qrCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+  qrDotsType?: QRDotsType;
+  qrCornerSquareType?: QRCornerSquareType;
+  qrCornerDotType?: QRCornerDotType;
+  qrCornerSquareColor?: string;
+  qrCornerDotColor?: string;
+  qrLogo?: string;
+  qrTransparent?: boolean;
+  path?: VectorPath;
+  effect: EffectSettings;
+  zIndex: number;
+  locked: boolean;
+}
+
+export interface CustomFont {
+  name: string;
+  url: string;
+}
+
+export interface UploadedAsset {
+  id: string;
+  type: 'image';
+  content: string;
+  name: string;
+  width: number;
+  height: number;
+}
+
+export interface SavedAsset {
+  id: string;
+  name: string;
+  elements: CanvasElement[];
+  groups: Record<string, GroupMetadata>;
+}
+
+export interface SavedDesign {
+  id: string;
+  name: string;
+  thumbnail: string;
+  createdAt: number;
+  updatedAt: number;
+  designState: string;
+}
+
+export interface BrandKit {
+  id: string;
+  name: string;
+  colors: string[];
+  fonts: {
+    heading: string;
+    subheading: string;
+    body: string;
+  };
+  customFonts: CustomFont[];
+  logos: string[];
+}
+
+export interface GroupMetadata {
+  id: string;
+  name: string;
+  collapsed: boolean;
+}
+
+export interface Page {
+  id: string;
+  name: string;
+  elements: CanvasElement[];
+  groups: Record<string, GroupMetadata>;
+  width?: number;
+  height?: number;
+  unit?: Unit;
+}
+
+export interface DesignState {
+  pages: Page[];
+  activePageId: string;
+  zoom: number;
+  title: string;
+  settings: DocumentSettings;
+  selection: string[];
+  activeGroupId: string | null;
+  savedColors: string[];
+  savedGradients: string[];
+  uploads: UploadedAsset[];
+  assets: SavedAsset[];
+  savedDesigns: SavedDesign[];
+  brandKits: BrandKit[];
+  activeBrandKitId: string | null;
+}
+
+export type LicensePlan = 'free' | 'team' | 'business' | 'pro' | 'enterprise';
+
+export interface LicenseEntitlements {
+  ai: boolean;
+  export: {
+    web: boolean;
+    print: boolean;
+  };
+  features?: Record<string, boolean>;
+  limits?: {
+    maxPages?: number;
+    maxExportsPerDay?: number;
+  };
+}
+
+export interface LicenseStatus {
+  isValid: boolean;
+  plan: LicensePlan;
+  showWatermark: boolean;
+  entitlements: LicenseEntitlements;
+  expiresAt?: string;
+  message?: string;
+  upgradeUrl?: string;
+}
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+export interface LicenseValidationRequest {
+  origin?: string;
+  projectId: string;
+  sdkVersion?: string;
+  customerId?: string;
+}
+
+export interface SDKServicesConfig {
+  geminiApiKey?: string;
+  unsplashProxyBaseUrl?: string;
+  licenseEndpoint?: string;
+  licenseRequest?: LicenseValidationRequest;
+  licenseTimeoutMs?: number;
+  aiEndpoint?: string;
+}
+
+export interface SDKAssetsConfig {
+  injectTailwind?: boolean;
+  tailwindCdnUrl?: string;
+  injectFont?: boolean;
+  fontHref?: string;
+  injectBaseStyles?: boolean;
+  showLoader?: boolean;
+}
+
+export interface EditorConfig {
+  apiKey: string;
+  projectId: string;
+  showCredit?: boolean;
+  container?: HTMLElement;
+  initialState?: {
+    pages: Page[];
+    settings: DocumentSettings;
+  };
+  services?: SDKServicesConfig;
+  assets?: SDKAssetsConfig;
+}
+
+export interface EmbedConfig extends EditorConfig {
+  container: HTMLElement;
+  className?: string;
+}
+
+export type EventType = 'change' | 'save' | 'select' | 'export';
+
+export interface Store {
+  state: DesignState;
+
+  subscribe(listener: () => void): () => void;
+  subscribeLicense(listener: () => void): () => void;
+
+  getLicenseStatus(): LicenseStatus;
+  getEntitlements(): LicenseEntitlements;
+
+  addPage(afterId?: string): void;
+  setActivePage(pageId: string): void;
+  duplicatePage(pageId: string): void;
+  deletePage(pageId: string): void;
+  renamePage(pageId: string, name: string): void;
+
+  addElement(element: Partial<CanvasElement>): void;
+  updateElement(id: string, updates: Partial<CanvasElement>, recordHistory?: boolean): void;
+  deleteElement(id: string): void;
+  duplicateElement(id: string): void;
+
+  setSelection(ids: string[], expandGroups?: boolean): void;
+  selectAll(): void;
+  deselectAll(): void;
+  deleteSelection(): void;
+
+  undo(): void;
+  redo(): void;
+  canUndo(): boolean;
+  canRedo(): boolean;
+
+  updateSettings(settings: Partial<DocumentSettings>): void;
+  toJSON(): string;
+  exportJSON(): string;
+  loadJSON(json: string): void;
+  reset(options?: { transparent?: boolean }): void;
+
+  on(event: EventType, callback: (data: any) => void): () => void;
+}
+
+export interface EditorInstance {
+  store: Store;
+  on(event: EventType, callback: (data: any) => void): () => void;
+  save(): string;
+  destroy(): void;
+}
+
+export function createFraczledEditor(config: EmbedConfig): EditorInstance;
+export function createOurEditorApp(config: EmbedConfig): EditorInstance;
+export function createStore(config: EditorConfig): Store;
+
+export { Store };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@fraczled/sdk",
+  "version": "1.0.1",
+  "description": "Fraczled Design Studio SDK - Embed a powerful design editor in your application",
+  "scripts": {
+    "build": "vite build --config ../vite.sdk.config.ts && vite build --config ../vite.sdk.umd.config.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "main": "dist/fraczled-sdk.umd.js",
+  "module": "dist/fraczled-sdk.es.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/fraczled-sdk.es.js",
+      "require": "./dist/fraczled-sdk.umd.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "index.d.ts",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "keywords": [
+    "design",
+    "editor",
+    "canvas",
+    "sdk",
+    "embed",
+    "graphic-design",
+    "flyer",
+    "poster"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Fraczled",
+  "license": "MIT"
+}