@d34dman/flowdrop 0.0.28 → 0.0.30

package/dist/form/markdown.js

@@ -0,0 +1,93 @@
+/**
+ * FlowDrop Form Markdown Editor Module
+ *
+ * Adds EasyMDE-based markdown editor support to SchemaForm.
+ * This module bundles EasyMDE dependencies (~200KB).
+ *
+ * @module form/markdown
+ *
+ * @example
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ * import { registerMarkdownEditorField } from "@d34dman/flowdrop/form/markdown";
+ *
+ * // Register markdown editor support (call once at app startup)
+ * registerMarkdownEditorField();
+ *
+ * // Now SchemaForm will render markdown editors for format: "markdown"
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     content: { type: "string", format: "markdown", title: "Content" }
+ *   }
+ * };
+ * ```
+ */
+import { registerFieldComponent } from "./fieldRegistry.js";
+// Re-export the component for direct usage if needed
+export { default as FormMarkdownEditor } from "../components/form/FormMarkdownEditor.svelte";
+/**
+ * Matcher for markdown editor fields
+ * Matches: format "markdown"
+ */
+export function markdownEditorFieldMatcher(schema) {
+    return schema.format === "markdown";
+}
+/**
+ * Track if markdown editor is registered
+ */
+let markdownEditorRegistered = false;
+/**
+ * Register the markdown editor field component
+ *
+ * Call this function once at application startup to enable
+ * markdown editor fields in SchemaForm. This loads EasyMDE dependencies.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerMarkdownEditorField } from "@d34dman/flowdrop/form/markdown";
+ *
+ * registerMarkdownEditorField();
+ * ```
+ */
+export function registerMarkdownEditorField(priority = 100) {
+    if (markdownEditorRegistered) {
+        return;
+    }
+    // Dynamic import to ensure proper code splitting
+    import("../components/form/FormMarkdownEditor.svelte").then((module) => {
+        registerFieldComponent("markdown-editor", module.default, markdownEditorFieldMatcher, priority);
+        markdownEditorRegistered = true;
+    });
+}
+/**
+ * Synchronously register markdown editor field using the imported component
+ *
+ * Use this when you've already imported the component and want immediate registration.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * import { registerMarkdownEditorFieldWithComponent, FormMarkdownEditor } from "@d34dman/flowdrop/form/markdown";
+ * registerMarkdownEditorFieldWithComponent(FormMarkdownEditor);
+ * ```
+ */
+export function registerMarkdownEditorFieldWithComponent(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component, priority = 100) {
+    if (markdownEditorRegistered) {
+        return;
+    }
+    registerFieldComponent("markdown-editor", component, markdownEditorFieldMatcher, priority);
+    markdownEditorRegistered = true;
+}
+/**
+ * Check if markdown editor field is registered
+ */
+export function isMarkdownEditorRegistered() {
+    return markdownEditorRegistered;
+}

package/dist/index.d.ts

@@ -1,69 +1,34 @@
 /**
  * FlowDrop - Visual Workflow Editor Library
- * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors
+ *
+ * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors.
+ *
+ * ## Module Structure (Tree-Shakable)
+ *
+ * For optimal bundle size, import from specific sub-modules:
+ *
+ * - `@d34dman/flowdrop/core` - Types and utilities only (no heavy deps)
+ * - `@d34dman/flowdrop/editor` - WorkflowEditor with @xyflow/svelte
+ * - `@d34dman/flowdrop/form` - SchemaForm with basic fields
+ * - `@d34dman/flowdrop/form/code` - Code editor support (adds CodeMirror)
+ * - `@d34dman/flowdrop/form/markdown` - Markdown editor support (adds EasyMDE)
+ * - `@d34dman/flowdrop/display` - MarkdownDisplay (adds marked)
+ * - `@d34dman/flowdrop/styles` - CSS styles
+ *
+ * ## Legacy Import (Full Bundle)
+ *
+ * Importing from the main entry point includes everything:
+ *
+ * ```typescript
+ * import { WorkflowEditor, SchemaForm } from "@d34dman/flowdrop";
+ * ```
+ *
+ * **Note**: This will bundle ALL dependencies including @xyflow/svelte,
+ * CodeMirror, EasyMDE, and marked. For smaller bundles, use sub-modules.
+ *
+ * @module flowdrop
  */
-import './styles/base.css';
-import './registry/builtinNodes.js';
-export type { NodeCategory, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions } from './types/index.js';
-export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from './types/config.js';
-export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from './types/auth.js';
-export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './types/auth.js';
-export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
-export { DEFAULT_FEATURES, mergeFeatures } from './types/events.js';
-export { FlowDropApiClient } from './api/client.js';
-export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
-export { default as WorkflowEditor } from './components/WorkflowEditor.svelte';
-export { default as NodeSidebar } from './components/NodeSidebar.svelte';
-export { default as WorkflowNodeComponent } from './components/nodes/WorkflowNode.svelte';
-export { default as SimpleNodeComponent } from './components/nodes/SimpleNode.svelte';
-export { default as ToolNodeComponent } from './components/nodes/ToolNode.svelte';
-export { default as NotesNodeComponent } from './components/nodes/NotesNode.svelte';
-export { default as CanvasBanner } from './components/CanvasBanner.svelte';
-export { default as UniversalNode } from './components/UniversalNode.svelte';
-export { default as GatewayNode } from './components/nodes/GatewayNode.svelte';
-export { default as SquareNode } from './components/nodes/SquareNode.svelte';
-export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
-export { default as StatusIcon } from './components/StatusIcon.svelte';
-export { default as StatusLabel } from './components/StatusLabel.svelte';
-export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.svelte';
-export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
-export { default as ConfigForm } from './components/ConfigForm.svelte';
-export { default as ConfigModal } from './components/ConfigModal.svelte';
-export { default as ConfigPanel } from './components/ConfigPanel.svelte';
-export { default as SchemaForm } from './components/SchemaForm.svelte';
-export type { SchemaFormProps, FieldSchema, FieldType, FieldFormat, FieldOption } from './components/form/types.js';
-export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
-export { default as ConnectionLine } from './components/ConnectionLine.svelte';
-export { default as LogsSidebar } from './components/LogsSidebar.svelte';
-export { default as PipelineStatus } from './components/PipelineStatus.svelte';
-export { default as Navbar } from './components/Navbar.svelte';
-export { default as Logo } from './components/Logo.svelte';
-export * from './utils/icons.js';
-export * from './utils/colors.js';
-export * from './utils/connections.js';
-export * from './utils/config.js';
-export * from './utils/nodeTypes.js';
-export { getStatusColor, getStatusIcon, getStatusLabel, getStatusBackgroundColor, getStatusTextColor, createDefaultExecutionInfo, updateExecutionStart, updateExecutionComplete, updateExecutionFailed, resetExecutionInfo, formatExecutionDuration, formatLastExecuted } from './utils/nodeStatus.js';
-export { createNodeWrapperConfig, shouldShowNodeStatus, getOptimalStatusPosition, getOptimalStatusSize, DEFAULT_NODE_STATUS_CONFIG } from './utils/nodeWrapper.js';
-export type { NodeStatusConfig } from './utils/nodeWrapper.js';
-export { nodeComponentRegistry, createNamespacedType, parseNamespacedType, BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from './registry/index.js';
-export type { NodeComponentProps, NodeComponentRegistration, NodeComponentCategory, StatusPosition, StatusSize, NodeRegistrationFilter, FlowDropPluginConfig, PluginNodeDefinition, PluginRegistrationResult } from './registry/index.js';
-export * from './services/api.js';
-export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToast, dismissAllToasts, showPromise, showConfirmation, apiToasts, workflowToasts, pipelineToasts } from './services/toastService.js';
-export type { ToastType, ToastOptions } from './services/toastService.js';
-export { NodeExecutionService, nodeExecutionService } from './services/nodeExecutionService.js';
-export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from './services/workflowStorage.js';
-export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from './services/globalSave.js';
-export { fetchPortConfig, validatePortConfig } from './services/portConfigApi.js';
-export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from './services/dynamicSchemaService.js';
-export type { DynamicSchemaResult } from './services/dynamicSchemaService.js';
-export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from './services/draftStorage.js';
-export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
-export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, connectedHandles, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
-export * from './config/endpoints.js';
-export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
-export * from './config/runtimeConfig.js';
-export * from './adapters/WorkflowAdapter.js';
-export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
-export type { FlowDropMountOptions, MountedFlowDropApp, NavbarAction } from './svelte-app.js';
-export { ApiError } from './api/enhanced-client.js';
+export * from "./core/index.js";
+export * from "./form/index.js";
+export * from "./display/index.js";
+export * from "./editor/index.js";

package/dist/index.js

@@ -1,83 +1,52 @@
 /**
  * FlowDrop - Visual Workflow Editor Library
- * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors
+ *
+ * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors.
+ *
+ * ## Module Structure (Tree-Shakable)
+ *
+ * For optimal bundle size, import from specific sub-modules:
+ *
+ * - `@d34dman/flowdrop/core` - Types and utilities only (no heavy deps)
+ * - `@d34dman/flowdrop/editor` - WorkflowEditor with @xyflow/svelte
+ * - `@d34dman/flowdrop/form` - SchemaForm with basic fields
+ * - `@d34dman/flowdrop/form/code` - Code editor support (adds CodeMirror)
+ * - `@d34dman/flowdrop/form/markdown` - Markdown editor support (adds EasyMDE)
+ * - `@d34dman/flowdrop/display` - MarkdownDisplay (adds marked)
+ * - `@d34dman/flowdrop/styles` - CSS styles
+ *
+ * ## Legacy Import (Full Bundle)
+ *
+ * Importing from the main entry point includes everything:
+ *
+ * ```typescript
+ * import { WorkflowEditor, SchemaForm } from "@d34dman/flowdrop";
+ * ```
+ *
+ * **Note**: This will bundle ALL dependencies including @xyflow/svelte,
+ * CodeMirror, EasyMDE, and marked. For smaller bundles, use sub-modules.
+ *
+ * @module flowdrop
  */
-// Import CSS to ensure styles are included in the library build
-import './styles/base.css';
-// Initialize built-in node components in the registry
-// This import has a side effect of registering all built-in nodes
-import './registry/builtinNodes.js';
-export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './types/auth.js';
-export { DEFAULT_FEATURES, mergeFeatures } from './types/events.js';
-// Export API clients
-export { FlowDropApiClient } from './api/client.js';
-export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
-// Export components
-export { default as WorkflowEditor } from './components/WorkflowEditor.svelte';
-export { default as NodeSidebar } from './components/NodeSidebar.svelte';
-export { default as WorkflowNodeComponent } from './components/nodes/WorkflowNode.svelte';
-export { default as SimpleNodeComponent } from './components/nodes/SimpleNode.svelte';
-export { default as ToolNodeComponent } from './components/nodes/ToolNode.svelte';
-export { default as NotesNodeComponent } from './components/nodes/NotesNode.svelte';
-export { default as CanvasBanner } from './components/CanvasBanner.svelte';
-export { default as UniversalNode } from './components/UniversalNode.svelte';
-export { default as GatewayNode } from './components/nodes/GatewayNode.svelte';
-export { default as SquareNode } from './components/nodes/SquareNode.svelte';
-export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
-export { default as StatusIcon } from './components/StatusIcon.svelte';
-export { default as StatusLabel } from './components/StatusLabel.svelte';
-export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.svelte';
-export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
-export { default as ConfigForm } from './components/ConfigForm.svelte';
-export { default as ConfigModal } from './components/ConfigModal.svelte';
-export { default as ConfigPanel } from './components/ConfigPanel.svelte';
-export { default as SchemaForm } from './components/SchemaForm.svelte';
-export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
-export { default as ConnectionLine } from './components/ConnectionLine.svelte';
-export { default as LogsSidebar } from './components/LogsSidebar.svelte';
-export { default as PipelineStatus } from './components/PipelineStatus.svelte';
-export { default as Navbar } from './components/Navbar.svelte';
-export { default as Logo } from './components/Logo.svelte';
-// Export utilities
-export * from './utils/icons.js';
-export * from './utils/colors.js';
-export * from './utils/connections.js';
-export * from './utils/config.js';
-export * from './utils/nodeTypes.js';
-export { getStatusColor, getStatusIcon, getStatusLabel, getStatusBackgroundColor, getStatusTextColor, createDefaultExecutionInfo, updateExecutionStart, updateExecutionComplete, updateExecutionFailed, resetExecutionInfo, formatExecutionDuration, formatLastExecuted } from './utils/nodeStatus.js';
-export { createNodeWrapperConfig, shouldShowNodeStatus, getOptimalStatusPosition, getOptimalStatusSize, DEFAULT_NODE_STATUS_CONFIG } from './utils/nodeWrapper.js';
-// Export node component registry
-export { 
-// Core registry
-nodeComponentRegistry, createNamespacedType, parseNamespacedType, 
-// Built-in nodes
-BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, 
-// Plugin system
-registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from './registry/index.js';
-// Export services
-export * from './services/api.js';
-export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToast, dismissAllToasts, showPromise, showConfirmation, apiToasts, workflowToasts, pipelineToasts } from './services/toastService.js';
-export { NodeExecutionService, nodeExecutionService } from './services/nodeExecutionService.js';
-export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from './services/workflowStorage.js';
-export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from './services/globalSave.js';
-export { fetchPortConfig, validatePortConfig } from './services/portConfigApi.js';
-// Export dynamic schema service for config edit functionality
-export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from './services/dynamicSchemaService.js';
-// Export draft storage service
-export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from './services/draftStorage.js';
-// Export helpers
-export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
-// Export stores
-export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, connectedHandles, 
-// Dirty state tracking
-isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
-// Export endpoint configuration
-export * from './config/endpoints.js';
-export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
-export * from './config/runtimeConfig.js';
-// Export adapters
-export * from './adapters/WorkflowAdapter.js';
-// Export Svelte app wrapper for framework integration
-export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
-// Export API error class
-export { ApiError } from './api/enhanced-client.js';
+// ============================================================================
+// IMPORTANT: This module re-exports from sub-modules for backward compatibility.
+// New code should import directly from sub-modules for better tree-shaking.
+// ============================================================================
+// ============================================================================
+// Core Exports (Types & Utilities - No Heavy Dependencies)
+// ============================================================================
+export * from "./core/index.js";
+// ============================================================================
+// Form Exports
+// ============================================================================
+export * from "./form/index.js";
+// Note: Heavy form fields (code, markdown) are NOT auto-registered.
+// Users must import from form/code or form/markdown and register explicitly.
+// ============================================================================
+// Display Exports
+// ============================================================================
+export * from "./display/index.js";
+// ============================================================================
+// Editor Exports (includes @xyflow/svelte and auto-registers builtin nodes)
+// ============================================================================
+export * from "./editor/index.js";

package/dist/styles/base.css

@@ -1157,6 +1157,11 @@
 	--flowdrop-edge-data-color-hover: var(--color-ref-gray-500);
 	--flowdrop-edge-data-color-selected: var(--color-ref-violet-600);
 
+	/* Tool node theming tokens */
+	--flowdrop-tool-node-color: var(--color-ref-amber-500);
+	--flowdrop-tool-node-color-light: var(--color-ref-amber-50);
+	--flowdrop-tool-node-color-border: var(--color-ref-amber-300);
+
 	/* Semantic text color tokens */
 	--flowdrop-text-color-error: var(--color-ref-red-600);
 	--flowdrop-text-color-success: var(--color-ref-green-600);

package/dist/utils/colors.d.ts

@@ -148,3 +148,45 @@ export declare function isArrayDataType(dataType: string): boolean;
  * @returns The element type (e.g., "string") or null if not an array
  */
 export declare function getArrayElementType(arrayDataType: string): string | null;
+/**
+ * Parse a hex color string to RGB components
+ * @param hex - Hex color string (e.g., "#f59e0b" or "f59e0b")
+ * @returns Object with r, g, b values (0-255) or null if invalid
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert RGB components to hex color string
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Hex color string with # prefix
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Generate a light tint of a color (similar to Tailwind's -50 shade)
+ * Creates a very light background-friendly version of the color
+ * @param hex - Base hex color string
+ * @returns Light tint hex color string
+ */
+export declare function getLightTint(hex: string): string;
+/**
+ * Generate a border tint of a color (similar to Tailwind's -300 shade)
+ * Creates a medium-light version suitable for borders
+ * @param hex - Base hex color string
+ * @returns Border tint hex color string
+ */
+export declare function getBorderTint(hex: string): string;
+/**
+ * Generate color variants for theming a component
+ * @param baseColor - Base hex color string
+ * @returns Object with base, light, and border color variants
+ */
+export declare function getColorVariants(baseColor: string): {
+    base: string;
+    light: string;
+    border: string;
+};

package/dist/utils/colors.js

@@ -302,3 +302,80 @@ export function getArrayElementType(arrayDataType) {
     }
     return null;
 }
+/**
+ * Parse a hex color string to RGB components
+ * @param hex - Hex color string (e.g., "#f59e0b" or "f59e0b")
+ * @returns Object with r, g, b values (0-255) or null if invalid
+ */
+export function hexToRgb(hex) {
+    const cleanHex = hex.replace(/^#/, "");
+    if (!/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        return null;
+    }
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return { r, g, b };
+}
+/**
+ * Convert RGB components to hex color string
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Hex color string with # prefix
+ */
+export function rgbToHex(r, g, b) {
+    const toHex = (value) => {
+        const clamped = Math.max(0, Math.min(255, Math.round(value)));
+        return clamped.toString(16).padStart(2, "0");
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Generate a light tint of a color (similar to Tailwind's -50 shade)
+ * Creates a very light background-friendly version of the color
+ * @param hex - Base hex color string
+ * @returns Light tint hex color string
+ */
+export function getLightTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return "#fffbeb"; // Fallback to amber-50
+    }
+    // Mix with white at 95% to create a very light tint
+    const mixRatio = 0.95;
+    const r = rgb.r + (255 - rgb.r) * mixRatio;
+    const g = rgb.g + (255 - rgb.g) * mixRatio;
+    const b = rgb.b + (255 - rgb.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
+/**
+ * Generate a border tint of a color (similar to Tailwind's -300 shade)
+ * Creates a medium-light version suitable for borders
+ * @param hex - Base hex color string
+ * @returns Border tint hex color string
+ */
+export function getBorderTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return "#fcd34d"; // Fallback to amber-300
+    }
+    // Mix with white at 60% to create a medium-light tint
+    const mixRatio = 0.6;
+    const r = rgb.r + (255 - rgb.r) * mixRatio;
+    const g = rgb.g + (255 - rgb.g) * mixRatio;
+    const b = rgb.b + (255 - rgb.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
+/**
+ * Generate color variants for theming a component
+ * @param baseColor - Base hex color string
+ * @returns Object with base, light, and border color variants
+ */
+export function getColorVariants(baseColor) {
+    return {
+        base: baseColor,
+        light: getLightTint(baseColor),
+        border: getBorderTint(baseColor)
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.28",
+	"version": "0.0.30",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -71,7 +71,8 @@
 	],
 	"sideEffects": [
 		"**/*.css",
-		"./dist/styles/base.css"
+		"./dist/styles/base.css",
+		"./dist/editor/index.js"
 	],
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -82,12 +83,54 @@
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
-		"./styles/base.css": "./dist/styles/base.css"
+		"./core": {
+			"types": "./dist/core/index.d.ts",
+			"svelte": "./dist/core/index.js",
+			"default": "./dist/core/index.js"
+		},
+		"./editor": {
+			"types": "./dist/editor/index.d.ts",
+			"svelte": "./dist/editor/index.js",
+			"default": "./dist/editor/index.js"
+		},
+		"./form": {
+			"types": "./dist/form/index.d.ts",
+			"svelte": "./dist/form/index.js",
+			"default": "./dist/form/index.js"
+		},
+		"./form/code": {
+			"types": "./dist/form/code.d.ts",
+			"svelte": "./dist/form/code.js",
+			"default": "./dist/form/code.js"
+		},
+		"./form/markdown": {
+			"types": "./dist/form/markdown.d.ts",
+			"svelte": "./dist/form/markdown.js",
+			"default": "./dist/form/markdown.js"
+		},
+		"./form/full": {
+			"types": "./dist/form/full.d.ts",
+			"svelte": "./dist/form/full.js",
+			"default": "./dist/form/full.js"
+		},
+		"./display": {
+			"types": "./dist/display/index.d.ts",
+			"svelte": "./dist/display/index.js",
+			"default": "./dist/display/index.js"
+		},
+		"./styles": "./dist/styles/base.css",
+		"./styles/*": "./dist/styles/*"
 	},
 	"peerDependencies": {
+		"@iconify/svelte": "^5.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@iconify/svelte": {
+			"optional": false
+		}
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/d34dman/flowdrop.git"