@flowdrop/flowdrop 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/components/playground/ChatInput.svelte

@@ -232,7 +232,6 @@
 
   .chat-input__wrapper:focus-within {
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 3px var(--fd-primary-muted);
   }
 
   .chat-input__textarea {

package/dist/components/playground/InputCollector.svelte

@@ -8,6 +8,9 @@
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Input from '../Input.svelte';
+  import Select from '../Select.svelte';
+  import Textarea from '../Textarea.svelte';
   import { slide } from 'svelte/transition';
   import type { PlaygroundInputField } from '../../types/playground.js';
   import { getInstance } from '../../stores/getInstance.svelte.js';
@@ -171,9 +174,8 @@
 
               {#if hasEnumOptions(field)}
                 <!-- Select for enum fields -->
-                <select
+                <Select
                   id="input-{field.nodeId}-{field.fieldId}"
-                  class="input-collector__select"
                   value={getValue(field)}
                   onchange={(e) => updateValue(field, e.currentTarget.value)}
                 >
@@ -181,17 +183,16 @@
                   {#each field.schema?.enum ?? [] as option (option)}
                     <option value={String(option)}>{option}</option>
                   {/each}
-                </select>
+                </Select>
               {:else if getInputType(field) === 'textarea'}
                 <!-- Textarea for multiline -->
-                <textarea
+                <Textarea
                   id="input-{field.nodeId}-{field.fieldId}"
-                  class="input-collector__textarea"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
-                  rows="3"
-                ></textarea>
+                  rows={3}
+                />
               {:else if getInputType(field) === 'checkbox'}
                 <!-- Checkbox for boolean -->
                 <label class="input-collector__checkbox-wrapper">
@@ -208,10 +209,10 @@
                 </label>
               {:else if getInputType(field) === 'number'}
                 <!-- Number input -->
-                <input
+                <Input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="number"
-                  class="input-collector__input"
+                  class="flowdrop-input--numeric"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={Number(getValue(field) ?? 0)}
                   min={field.schema?.minimum}
@@ -220,10 +221,9 @@
                 />
               {:else}
                 <!-- Text input (default) -->
-                <input
+                <Input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="text"
-                  class="input-collector__input"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
@@ -351,43 +351,6 @@
     color: var(--fd-error);
   }
 
-  .input-collector__input,
-  .input-collector__select,
-  .input-collector__textarea {
-    padding: var(--fd-space-xs) var(--fd-space-md);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-lg);
-    font-size: var(--fd-text-sm);
-    font-family: inherit;
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-  }
-
-  .input-collector__input:focus,
-  .input-collector__select:focus,
-  .input-collector__textarea:focus {
-    outline: none;
-    border-color: var(--fd-primary);
-    box-shadow: 0 0 0 3px var(--fd-primary-muted);
-  }
-
-  .input-collector__input::placeholder,
-  .input-collector__textarea::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .input-collector__textarea {
-    resize: vertical;
-    min-height: 80px;
-  }
-
-  .input-collector__select {
-    cursor: pointer;
-  }
-
   .input-collector__checkbox-wrapper {
     display: flex;
     align-items: center;

package/dist/components/playground/PlaygroundApp.svelte

@@ -52,7 +52,7 @@
     endpointConfig,
     authProvider,
     config = {},
-    showNavbar = true,
+    showNavbar = false,
     navbarTitle,
     primaryActions = [],
     showSettings = true,

package/dist/components/playground/PlaygroundStudio.svelte

@@ -463,11 +463,6 @@
     .playground-studio__back-to-chat:hover {
       background-color: var(--fd-muted);
     }
-
-    .playground-studio__back-to-chat:focus-visible {
-      outline: 2px solid var(--fd-ring);
-      outline-offset: 2px;
-    }
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/messages/index.d.ts

@@ -2,7 +2,7 @@
  * Messages module — typed, overridable, translation-ready user-facing strings.
  *
  * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
- * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ * plumbing, and the i18n guide in the docs site (`.docs/`) for consumer recipes.
  */
 export { defaultMessages } from './defaults.js';
 export { mergeMessages } from './merge.js';

package/dist/messages/index.js

@@ -2,7 +2,7 @@
  * Messages module — typed, overridable, translation-ready user-facing strings.
  *
  * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
- * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ * plumbing, and the i18n guide in the docs site (`.docs/`) for consumer recipes.
  */
 export { defaultMessages } from './defaults.js';
 export { mergeMessages } from './merge.js';

package/dist/openapi/v1/openapi.yaml

@@ -37,8 +37,8 @@ info:
     email: shibinkidd@gmail.com
     url: https://www.drupal.org/project/issues/flowdrop?categories=All
 servers:
-  - url: http://localhost:5173/api/flowdrop
-    description: Local development server (Svelte)
+  - url: http://localhost:7104/api/flowdrop
+    description: Local development server
   - url: https://flowdrop.ddev.site/api/flowdrop
     description: Local Drupal server
 security:

package/dist/playground/mount.d.ts

@@ -252,7 +252,7 @@ export interface PlaygroundAppMountOptions extends Omit<PlaygroundStudioMountOpt
      * @default "standalone"
      */
     mode?: 'standalone' | 'embedded';
-    /** Render the FlowDrop Navbar above the playground (default: true). */
+    /** Render the FlowDrop Navbar above the playground (default: false). */
     showNavbar?: boolean;
     /** Title shown in the navbar. Falls back to the workflow name, then "Playground". */
     navbarTitle?: string;
@@ -268,17 +268,21 @@ export interface PlaygroundAppMountOptions extends Omit<PlaygroundStudioMountOpt
     showSettingsResetButton?: boolean;
 }
 /**
- * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ * Mount the full-page PlaygroundApp (PlaygroundStudio, optionally wrapped in the
+ * FlowDrop Navbar) into a container.
  *
- * Use this when you want the same chrome as the FlowDrop editor — logo,
- * branding, and settings modal — wrapped around the playground. For an
- * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ * The navbar is opt-in (`showNavbar: true`) — matching the editor mount, so
+ * embedding into a page that already has its own header never double-stacks a
+ * header. Pass `showNavbar: true` when FlowDrop owns the whole page and you want
+ * its chrome (logo, branding, settings modal). For a leaner embeddable
+ * split-pane, mountPlaygroundStudio() omits the navbar wrapper entirely.
  *
  * @example
  * ```typescript
  * const app = await mountPlaygroundApp(container, {
  *   workflowId: 'wf-123',
  *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   showNavbar: true,
  *   navbarTitle: 'My Workflow',
  *   primaryActions: [
  *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },

package/dist/playground/mount.js

@@ -287,17 +287,21 @@ export async function mountPlaygroundStudio(container, options) {
     return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
 }
 /**
- * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ * Mount the full-page PlaygroundApp (PlaygroundStudio, optionally wrapped in the
+ * FlowDrop Navbar) into a container.
  *
- * Use this when you want the same chrome as the FlowDrop editor — logo,
- * branding, and settings modal — wrapped around the playground. For an
- * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ * The navbar is opt-in (`showNavbar: true`) — matching the editor mount, so
+ * embedding into a page that already has its own header never double-stacks a
+ * header. Pass `showNavbar: true` when FlowDrop owns the whole page and you want
+ * its chrome (logo, branding, settings modal). For a leaner embeddable
+ * split-pane, mountPlaygroundStudio() omits the navbar wrapper entirely.
  *
  * @example
  * ```typescript
  * const app = await mountPlaygroundApp(container, {
  *   workflowId: 'wf-123',
  *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   showNavbar: true,
  *   navbarTitle: 'My Workflow',
  *   primaryActions: [
  *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
@@ -307,7 +311,7 @@ export async function mountPlaygroundStudio(container, options) {
  * ```
  */
 export async function mountPlaygroundApp(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, instanceId } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, showNavbar = false, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, instanceId } = options;
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlaygroundApp()');
     }

package/dist/skins/drafter.d.ts

@@ -0,0 +1,30 @@
+import type { FlowDropSkin } from '../types/skin';
+/**
+ * Drafter — a fresh, modern "drafting workspace" skin for the whole editor
+ * environment (see ref-image.png): a fresh white shell around a mint/aqua
+ * canvas with soft cyan/teal technical grid lines, crisp engineering geometry
+ * and clean teal-ink text — not a neutral admin UI and not an all-cyan shell.
+ *
+ * Unlike a canvas-only skin, Drafter themes the entire shell so it reads as one
+ * designed environment:
+ *  - App chrome (navbar, sidebars, inspector, status bars, form fields) stays
+ *    white/near-white for a clean fresh product feel.
+ *  - The mint/aqua personality lives in the canvas, node glass, focus rings,
+ *    selected states and small technical accents.
+ *  - Disabled/read-only surfaces use quiet light grey so state remains obvious.
+ *  - Borders are mostly neutral hairlines; strong/focus borders + node outlines
+ *    are teal/cyan ink (--fd-ring / --fd-border-strong / --fd-node-border).
+ *  - Focus rings are cyan (--fd-ring), not the default blue.
+ *  - Nodes are frosted glass with a faint inner highlight; the minimap + zoom
+ *    controls share the same vocabulary.
+ *  - Note/instruction cards read as cool annotations (translucent tint + slate
+ *    ink border), never as a filled "success" card.
+ *  - Emerald/green is reserved for primary actions, selection and live edges
+ *    (--fd-primary) — it is not used for every outline.
+ *
+ * Data-type port colors and category icon colors are left untouched so they keep
+ * their full color against the draft surface. The square grid is rendered by
+ * WorkflowEditor via config.canvas.grid = 'lines'; --fd-grid-pattern-color
+ * colors it. Ships light + dark variants.
+ */
+export declare const drafterSkin: FlowDropSkin;

package/dist/skins/drafter.js

@@ -0,0 +1,198 @@
+/**
+ * Drafter — a fresh, modern "drafting workspace" skin for the whole editor
+ * environment (see ref-image.png): a fresh white shell around a mint/aqua
+ * canvas with soft cyan/teal technical grid lines, crisp engineering geometry
+ * and clean teal-ink text — not a neutral admin UI and not an all-cyan shell.
+ *
+ * Unlike a canvas-only skin, Drafter themes the entire shell so it reads as one
+ * designed environment:
+ *  - App chrome (navbar, sidebars, inspector, status bars, form fields) stays
+ *    white/near-white for a clean fresh product feel.
+ *  - The mint/aqua personality lives in the canvas, node glass, focus rings,
+ *    selected states and small technical accents.
+ *  - Disabled/read-only surfaces use quiet light grey so state remains obvious.
+ *  - Borders are mostly neutral hairlines; strong/focus borders + node outlines
+ *    are teal/cyan ink (--fd-ring / --fd-border-strong / --fd-node-border).
+ *  - Focus rings are cyan (--fd-ring), not the default blue.
+ *  - Nodes are frosted glass with a faint inner highlight; the minimap + zoom
+ *    controls share the same vocabulary.
+ *  - Note/instruction cards read as cool annotations (translucent tint + slate
+ *    ink border), never as a filled "success" card.
+ *  - Emerald/green is reserved for primary actions, selection and live edges
+ *    (--fd-primary) — it is not used for every outline.
+ *
+ * Data-type port colors and category icon colors are left untouched so they keep
+ * their full color against the draft surface. The square grid is rendered by
+ * WorkflowEditor via config.canvas.grid = 'lines'; --fd-grid-pattern-color
+ * colors it. Ships light + dark variants.
+ */
+export const drafterSkin = {
+    tokens: {
+        /* ----- Shell surfaces: fresh white shell + pale mint chrome ----- */
+        /* Neutral greys read as cold admin chrome and fight the mint canvas, so the
+           quiet surfaces carry a faint aqua-mint tint instead. muted-foreground is
+           a darker teal-slate (≈6.5:1 on white) so secondary/helper text clears
+           WCAG AA comfortably — grey body text was the accessibility problem. */
+        background: '#ffffff',
+        foreground: '#10201c',
+        muted: '#eaf5f0',
+        'muted-foreground': '#46635b',
+        subtle: '#e1f0ea',
+        card: '#ffffff',
+        'card-foreground': '#10201c',
+        header: '#ffffff',
+        'header-foreground': '#10201c',
+        'header-gradient': 'linear-gradient(180deg, #ffffff 0%, #fbfefd 100%)',
+        'surface-tint': 'rgba(20, 184, 166, 0.015)',
+        /* White sidebars/inspector with only a whisper of technical glass */
+        'panel-bg': 'rgba(255, 255, 255, 0.94)',
+        'panel-backdrop-filter': 'blur(10px) saturate(1.04)',
+        backdrop: 'rgba(255, 255, 255, 0.92)',
+        /* ----- Borders: soft mint hairlines; strong/focus = teal-cyan accent ----- */
+        border: '#d3e6df',
+        'border-muted': '#e4f0eb',
+        'border-strong': 'rgba(15, 118, 110, 0.42)',
+        ring: '#06b6d4',
+        /* ----- Canvas: fresh aqua-mint, soft cyan/teal square grid ----- */
+        'canvas-bg': '#fbfefd',
+        'grid-pattern-color': 'rgba(20, 184, 166, 0.08)',
+        /* ----- Nodes: frosted glass, faint inner highlight ----- */
+        'node-bg': 'rgba(247, 252, 250, 0.7)',
+        'node-header-bg': 'rgba(214, 245, 236, 0.6)',
+        'node-backdrop-filter': 'blur(10px) saturate(1.15)',
+        'node-radius': '2px',
+        'node-shadow': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.6)',
+        'node-shadow-hover': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.85)',
+        'node-border': '#0f766e',
+        'node-border-hover': '#0c5f59',
+        'node-border-width': '1.25px',
+        /* Header divider matches the node outline ink (tracks light/dark node-border) */
+        'node-header-divider-color': 'var(--fd-node-border)',
+        'handle-border': '#ffffff',
+        /* Notes read as cool annotations, not filled success cards */
+        'note-border': '#5b7891',
+        'note-border-hover': '#48617a',
+        /* Status hues tuned to the cool palette: danger = rose (teal's warm
+           complement, not a generic red), warning = golden amber. Success/info stay
+           on the emerald/cyan family so they read as part of the theme. */
+        success: '#0d9488',
+        'success-hover': '#0f766e',
+        info: '#0891b2',
+        'info-hover': '#0e7490',
+        warning: '#d97706',
+        'warning-hover': '#b45309',
+        error: '#e11d48',
+        'error-hover': '#be123c',
+        /* Status/accent tints are FLAT + OPAQUE (not alpha) so the action buttons
+           that use them as fills (form add/move/delete, canvas toggles, secondary)
+           read as solid chips, never see-through to the grid. Values are the opaque
+           equivalent of the former translucent tints over the white shell. */
+        'info-muted': '#e6f4f7',
+        'success-muted': '#e7f4f3',
+        'warning-muted': '#faefe1',
+        'error-muted': '#fce8ed',
+        /* ----- Crisp drafting geometry + flat chrome (2–6px radius, no soft shadow) ----- */
+        'radius-sm': '2px',
+        'radius-md': '3px',
+        'radius-lg': '4px',
+        'radius-xl': '6px',
+        /* Form controls + their group containers (fields, array item boxes,
+           fieldsets) get the sharpest 2px corner so the config panel reads as
+           crisp drafting geometry, not rounded admin chrome. */
+        'control-radius': '2px',
+        'scrollbar-radius': '0',
+        'shadow-sm': 'none',
+        'shadow-md': 'none',
+        /* ----- Canvas overlays: light, instrument-like ----- */
+        'minimap-bg': 'rgba(255, 255, 255, 0.72)',
+        'minimap-mask-bg': 'rgba(15, 118, 110, 0.08)',
+        'minimap-mask-stroke': 'rgba(15, 118, 110, 0.35)',
+        'minimap-node-bg': 'rgba(15, 118, 110, 0.3)',
+        'minimap-node-stroke': 'rgba(15, 118, 110, 0.45)',
+        'controls-button-bg': '#ffffff',
+        'controls-button-bg-hover': '#ccfbf1',
+        'controls-button-color': '#0f766e',
+        'controls-button-color-hover': '#0c5f59',
+        'controls-button-border': 'rgba(15, 118, 110, 0.25)',
+        /* ----- Secondary = mint, accent = cyan, primary = the one allowed green ----- */
+        secondary: '#e4f1ed',
+        'secondary-hover': '#cfe6e0',
+        'secondary-foreground': '#0f3d36',
+        accent: '#06b6d4',
+        'accent-hover': '#0891b2',
+        'accent-foreground': '#ffffff',
+        'accent-muted': '#e1f6fa',
+        primary: '#10b981',
+        'primary-hover': '#059669',
+        'primary-foreground': '#ffffff',
+        'primary-muted': '#def5ed'
+    },
+    darkTokens: {
+        /* ----- Shell surfaces: deep teal-slate glass ----- */
+        background: '#0e2421',
+        foreground: '#d8f0ea',
+        muted: 'rgba(20, 60, 54, 0.6)',
+        'muted-foreground': '#8fb3aa',
+        subtle: 'rgba(13, 47, 44, 0.7)',
+        card: 'rgba(18, 42, 38, 0.96)',
+        'card-foreground': '#d8f0ea',
+        header: 'rgba(13, 40, 37, 0.7)',
+        'header-foreground': '#d8f0ea',
+        'header-gradient': 'linear-gradient(180deg, rgba(17, 42, 38, 0.9) 0%, rgba(12, 33, 30, 0.9) 100%)',
+        'surface-tint': 'rgba(45, 212, 191, 0.04)',
+        'panel-bg': 'rgba(14, 36, 33, 0.8)',
+        'panel-backdrop-filter': 'blur(14px) saturate(1.2)',
+        backdrop: 'rgba(11, 31, 28, 0.8)',
+        border: 'rgba(45, 212, 191, 0.22)',
+        'border-muted': 'rgba(45, 212, 191, 0.12)',
+        'border-strong': 'rgba(45, 212, 191, 0.4)',
+        ring: '#22d3ee',
+        'canvas-bg': '#0b1f1c',
+        'grid-pattern-color': 'rgba(45, 212, 191, 0.16)',
+        'node-bg': 'rgba(17, 38, 35, 0.62)',
+        'node-header-bg': 'rgba(13, 47, 44, 0.6)',
+        'node-backdrop-filter': 'blur(10px) saturate(1.2)',
+        'node-shadow': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.08)',
+        'node-shadow-hover': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.14)',
+        'node-border': '#0d9488',
+        'node-border-hover': '#2dd4bf',
+        'handle-border': '#0b1f1c',
+        'note-border': '#7d96b0',
+        'note-border-hover': '#9fb4cb',
+        success: '#2dd4bf',
+        'success-hover': '#5eead4',
+        info: '#22d3ee',
+        'info-hover': '#67e8f9',
+        warning: '#fbbf24',
+        'warning-hover': '#fcd34d',
+        error: '#fb7185',
+        'error-hover': '#fda4af',
+        /* Flat + opaque tints (opaque equivalent of the former alpha tints over the
+           deep teal-slate shell) so button fills never go see-through. */
+        'info-muted': '#10393a',
+        'success-muted': '#123934',
+        'warning-muted': '#2f3a21',
+        'error-muted': '#2a2d2d',
+        'minimap-bg': 'rgba(11, 31, 28, 0.7)',
+        'minimap-mask-bg': 'rgba(45, 212, 191, 0.06)',
+        'minimap-mask-stroke': 'rgba(45, 212, 191, 0.3)',
+        'minimap-node-bg': 'rgba(45, 212, 191, 0.28)',
+        'minimap-node-stroke': 'rgba(45, 212, 191, 0.45)',
+        'controls-button-bg': '#102522',
+        'controls-button-bg-hover': '#0d2d2a',
+        'controls-button-color': '#2dd4bf',
+        'controls-button-color-hover': '#5eead4',
+        'controls-button-border': 'rgba(45, 212, 191, 0.3)',
+        secondary: '#0d2d2a',
+        'secondary-hover': '#133a34',
+        'secondary-foreground': '#d8f0ea',
+        accent: '#22d3ee',
+        'accent-hover': '#67e8f9',
+        'accent-foreground': '#03291c',
+        'accent-muted': '#113d3e',
+        primary: '#34d399',
+        'primary-hover': '#6ee7b7',
+        'primary-foreground': '#03291c',
+        'primary-muted': '#144034'
+    }
+};

package/dist/skins/index.d.ts

@@ -1,6 +1,7 @@
 import type { FlowDropSkin, FlowDropSkinName } from '../types/skin';
 import { defaultSkin } from './default';
 import { slateSkin } from './slate';
+import { drafterSkin } from './drafter';
 /**
  * Resolve a skin prop to a complete FlowDropSkin object.
  *
@@ -10,4 +11,4 @@ import { slateSkin } from './slate';
  *   → minimal skin tokens + { primary: '#e11d48' }
  */
 export declare function resolveSkin(skin: FlowDropSkin | FlowDropSkinName | undefined): FlowDropSkin;
-export { defaultSkin, slateSkin };
+export { defaultSkin, slateSkin, drafterSkin };

package/dist/skins/index.js

@@ -1,8 +1,10 @@
 import { defaultSkin } from './default';
 import { slateSkin } from './slate';
+import { drafterSkin } from './drafter';
 const builtinSkins = {
     default: defaultSkin,
-    slate: slateSkin
+    slate: slateSkin,
+    drafter: drafterSkin
 };
 /**
  * Resolve a skin prop to a complete FlowDropSkin object.
@@ -27,4 +29,4 @@ export function resolveSkin(skin) {
     }
     return skin;
 }
-export { defaultSkin, slateSkin };
+export { defaultSkin, slateSkin, drafterSkin };