@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/nodes/TerminalNode.svelte

@@ -15,7 +15,7 @@
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
   import { getNodeIcon } from '../../utils/icons.js';
   import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
 
   /**
    * Terminal node variant types
@@ -83,6 +83,9 @@
     isError?: boolean;
   }>();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   /**
    * Determine terminal variant from config or metadata
    * Priority: config.variant > metadata tag detection > default to "start"
@@ -156,7 +159,7 @@
       return true;
     }
     const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-    return getConnectedHandles().has(handleId);
+    return fd.workflow.connectedHandles.has(handleId);
   }
 
   /**
@@ -165,7 +168,7 @@
    */
   let terminalIcon = $derived(
     props.data.metadata?.icon
-      ? getNodeIcon(props.data.metadata.icon, props.data.metadata?.category)
+      ? getNodeIcon(fd.categories, props.data.metadata.icon, props.data.metadata?.category)
       : variantConfig.icon
   );
 
@@ -175,7 +178,7 @@
    */
   let terminalColor = $derived(
     props.data.metadata?.category
-      ? getCategoryColorToken(props.data.metadata.category)
+      ? getCategoryColorToken(fd.categories, props.data.metadata.category)
       : variantConfig.color
   );
 
@@ -363,6 +366,7 @@
           type="target"
           position={Position.Left}
           style="--fd-handle-fill: {getDataTypeColor(
+            checker,
             port.dataType
           )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
           id={`${props.data.nodeId}-input-${port.id}`}
@@ -386,6 +390,7 @@
           position={Position.Right}
           id={`${props.data.nodeId}-output-${port.id}`}
           style="--fd-handle-fill: {getDataTypeColor(
+            checker,
             port.dataType
           )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
         />

package/dist/components/nodes/ToolNode.svelte

@@ -8,6 +8,7 @@
   import { Position, Handle } from '@xyflow/svelte';
   import Icon from '@iconify/svelte';
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import type { NodeMetadata, NodePort } from '../../types/index.js';
   import CogIcon from '../icons/CogIcon.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
@@ -46,6 +47,9 @@
     isError?: boolean;
   }>();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   // Prioritize metadata over config for tool nodes (metadata is the node definition)
   let toolIcon = $derived(
     (props.data.metadata?.icon as string) || (props.data.config?.icon as string) || 'mdi:tools'
@@ -171,6 +175,7 @@
     position={Position.Left}
     id={`${props.data.nodeId}-input-${toolInputPort.id}`}
     style="top: 40px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       portDataType
     )}); --fd-handle-border-color: var(--fd-handle-border);"
   />
@@ -199,7 +204,7 @@
       <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
       <span
         class="flowdrop-tool-node__color-dot"
-        style="background: {getCategoryColorToken(props.data.metadata?.category)}"
+        style="background: {getCategoryColorToken(fd.categories, props.data.metadata?.category)}"
       ></span>
 
       <!-- Tool Info -->
@@ -249,6 +254,7 @@
     position={Position.Right}
     id={`${props.data.nodeId}-output-${toolOutputPort.id}`}
     style="top: 40px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       portDataType
     )}); --fd-handle-border-color: var(--fd-handle-border);"
   />

package/dist/components/nodes/WorkflowNode.svelte

@@ -22,7 +22,7 @@
     getCategoryColorToken,
     getPortBackgroundColor
   } from '../../utils/colors.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { applyPortOrder } from '../../utils/portUtils.js';
   import { m } from '../../messages/index.js';
 
@@ -37,6 +37,9 @@
   let props: Props = $props();
   let isHandleInteraction = $state(false);
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   // Hoist the graph branch — three reads in the template, two of them inside
   // {#each port} loops where N×M reads add up. One getter walk per render.
   const graph = $derived(m().nodes.graph);
@@ -145,7 +148,7 @@
 
     // Check if port is connected
     const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-    return getConnectedHandles().has(handleId);
+    return fd.workflow.connectedHandles.has(handleId);
   }
 
   /**
@@ -219,17 +222,17 @@
       <!-- Squircle icon — visibility controlled by --fd-node-icon-display -->
       <div
         class="flowdrop-workflow-node__icon-wrapper"
-        style="--_icon-color: {getCategoryColorToken(props.data.metadata.category)}"
+        style="--_icon-color: {getCategoryColorToken(fd.categories, props.data.metadata.category)}"
       >
         <Icon
-          icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)}
+          icon={getNodeIcon(fd.categories, props.data.metadata.icon, props.data.metadata.category)}
           class="flowdrop-workflow-node__icon"
         />
       </div>
       <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
       <span
         class="flowdrop-workflow-node__color-dot"
-        style="background: {getCategoryColorToken(props.data.metadata.category)}"
+        style="background: {getCategoryColorToken(fd.categories, props.data.metadata.category)}"
       ></span>
 
       <!-- Node Title - Icon and Title on same line -->
@@ -262,6 +265,7 @@
               id={`${props.data.nodeId}-input-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
+                checker,
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
               tabindex={-1}
@@ -274,11 +278,13 @@
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
+                    checker,
                     port.dataType,
                     15
                   )}; color: {getDataTypeColorToken(
+                    checker,
                     port.dataType
-                  )}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
+                  )}; border: 1px solid {getPortBackgroundColor(checker, port.dataType, 30)};"
                 >
                   {port.dataType}
                 </span>
@@ -315,11 +321,13 @@
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
+                    checker,
                     port.dataType,
                     15
                   )}; color: {getDataTypeColorToken(
+                    checker,
                     port.dataType
-                  )}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
+                  )}; border: 1px solid {getPortBackgroundColor(checker, port.dataType, 30)};"
                 >
                   {port.dataType}
                 </span>
@@ -338,6 +346,7 @@
               id={`${props.data.nodeId}-output-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
+                checker,
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
               tabindex={-1}

package/dist/components/playground/ChatInput.svelte

@@ -12,14 +12,11 @@
   import Icon from '@iconify/svelte';
   import { tick, untrack } from 'svelte';
   import { hasEnableRunFlag } from '../../types/playground.js';
-  import {
-    getMessages,
-    getIsExecuting,
-    getCanSendMessage,
-    getCurrentSession
-  } from '../../stores/playgroundStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
 
+  const fd = getInstance();
+
   interface Props {
     placeholder?: string;
     /** Show the textarea (default: true). When false, only the Run button is shown. */
@@ -65,7 +62,7 @@
   let seenEnableRunCount = 0;
 
   $effect(() => {
-    const count = getMessages().filter((m) => hasEnableRunFlag(m.metadata)).length;
+    const count = fd.playground.messages.filter((m) => hasEnableRunFlag(m.metadata)).length;
     if (count > seenEnableRunCount) {
       untrack(() => {
         seenEnableRunCount = count;
@@ -75,7 +72,7 @@
   });
 
   $effect(() => {
-    if (getCurrentSession()?.id) {
+    if (fd.playground.currentSession?.id) {
       untrack(() => {
         seenEnableRunCount = 0;
       });
@@ -87,7 +84,7 @@
 
   /** Auto-focus input when execution completes */
   $effect(() => {
-    const nowExecuting = getIsExecuting();
+    const nowExecuting = fd.playground.isExecuting;
     if (wasExecuting && !nowExecuting && inputField) {
       tick().then(() => inputField?.focus({ preventScroll: true }));
     }
@@ -98,7 +95,7 @@
 
   function handleSend(): void {
     const trimmedValue = inputValue.trim();
-    if (!trimmedValue || !getCanSendMessage()) return;
+    if (!trimmedValue || !fd.playground.canSendMessage) return;
 
     onSendMessage?.(trimmedValue);
     inputValue = '';
@@ -124,7 +121,7 @@
   }
 
   function handleRun(): void {
-    if (getIsExecuting() || !runEnabled) return;
+    if (fd.playground.isExecuting || !runEnabled) return;
     runEnabled = false;
     onSendMessage?.(resolvedPredefinedMessage);
   }
@@ -153,14 +150,14 @@
             class="chat-input__textarea"
             placeholder={resolvedPlaceholder}
             rows="1"
-            disabled={getIsExecuting() || !getCurrentSession()}
+            disabled={fd.playground.isExecuting || !fd.playground.currentSession}
             onkeydown={handleKeydown}
             oninput={handleInput}
           ></textarea>
         </div>
       {/if}
 
-      {#if getIsExecuting()}
+      {#if fd.playground.isExecuting}
         <button
           type="button"
           class="chat-input__stop-btn"
@@ -176,7 +173,7 @@
           type="button"
           class="chat-input__send-btn"
           onclick={handleSend}
-          disabled={!inputValue.trim() || !getCanSendMessage()}
+          disabled={!inputValue.trim() || !fd.playground.canSendMessage}
           title={actions.sendTitle}
           aria-label={actions.sendTitle}
         >

package/dist/components/playground/ChatPanel.svelte

@@ -5,16 +5,14 @@
   MessageStream (message + interrupt feed) and ChatInput (textarea +
   send/run/stop). Use this for chat-style agent interactions.
 
-  For view-only execution surfaces, prefer the MessageStream primitive
-  directly — ChatPanel's showChatInput/showRunButton flags are kept for
-  backwards compatibility but are deprecated.
+  For view-only execution surfaces, use the MessageStream primitive directly.
+  Log visibility is managed by the playground store (fd.playground.setShowLogs).
 -->
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import MessageStream from './MessageStream.svelte';
   import ChatInput from './ChatInput.svelte';
-  import { playgroundActions } from '../../stores/playgroundStore.svelte.js';
   import { m } from '../../messages/index.js';
 
   interface Props {
@@ -28,22 +26,8 @@
     onInterruptResolved?: () => void;
     /** Render a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     * Kept for backwards compatibility with PlaygroundConfig URL params.
-     */
-    showChatInput?: boolean;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     */
-    showRunButton?: boolean;
     predefinedMessage?: string;
     compactSystemMessages?: boolean;
-    /**
-     * @deprecated `showLogs` is now managed by playgroundStore.
-     * Setting it here syncs to the store on mount for backwards compatibility.
-     */
-    showLogs?: boolean;
   }
 
   let {
@@ -56,23 +40,11 @@
     enableMarkdown = true,
     onInterruptResolved,
     onCreateSession,
-    showChatInput = true,
-    showRunButton = true,
     predefinedMessage,
-    compactSystemMessages = true,
-    showLogs
+    compactSystemMessages = true
   }: Props = $props();
 
   const states = $derived(m().playground.states);
-
-  const noInputsAvailable = $derived(!showChatInput && !showRunButton);
-
-  // Back-compat: sync legacy showLogs prop into the store whenever it changes.
-  $effect(() => {
-    if (showLogs !== undefined) {
-      playgroundActions.setShowLogs(showLogs);
-    }
-  });
 </script>
 
 <div class="chat-panel">
@@ -87,14 +59,7 @@
     emptySession={emptyChatState}
   />
 
-  <ChatInput
-    {placeholder}
-    {predefinedMessage}
-    {onSendMessage}
-    {onStopExecution}
-    showTextarea={showChatInput}
-    {showRunButton}
-  />
+  <ChatInput {placeholder} {predefinedMessage} {onSendMessage} {onStopExecution} />
 </div>
 
 {#snippet welcomeIcon()}
@@ -115,16 +80,8 @@
 {/snippet}
 
 {#snippet welcomeCopy()}
-  {#if noInputsAvailable}
-    <h2 class="chat-panel__welcome-title">{states.viewOnlyTitle}</h2>
-    <p class="chat-panel__welcome-text">{states.viewOnlyText}</p>
-  {:else if showChatInput}
-    <h2 class="chat-panel__welcome-title">{states.newSessionTitle}</h2>
-    <p class="chat-panel__welcome-text">{states.newSessionText}</p>
-  {:else}
-    <h2 class="chat-panel__welcome-title">{states.readyTitle}</h2>
-    <p class="chat-panel__welcome-text">{states.readyText}</p>
-  {/if}
+  <h2 class="chat-panel__welcome-title">{states.newSessionTitle}</h2>
+  <p class="chat-panel__welcome-text">{states.newSessionText}</p>
 {/snippet}
 
 {#snippet welcomeState()}

package/dist/components/playground/ChatPanel.svelte.d.ts

@@ -9,22 +9,8 @@ interface Props {
     onInterruptResolved?: () => void;
     /** Render a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     * Kept for backwards compatibility with PlaygroundConfig URL params.
-     */
-    showChatInput?: boolean;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     */
-    showRunButton?: boolean;
     predefinedMessage?: string;
     compactSystemMessages?: boolean;
-    /**
-     * @deprecated `showLogs` is now managed by playgroundStore.
-     * Setting it here syncs to the store on mount for backwards compatibility.
-     */
-    showLogs?: boolean;
 }
 declare const ChatPanel: import("svelte").Component<Props, {}, "">;
 type ChatPanel = ReturnType<typeof ChatPanel>;