@morscherlab/mld-sdk 0.7.0 → 0.7.2

package/dist/composables/index.d.ts

@@ -16,4 +16,5 @@ export { useSequenceUtils, type SequenceType, type SequenceStats, } from './useS
 export { parseTime, formatTime, generateTimeSlots, rangesOverlap, durationMinutes, formatDuration, isTimeInRange, findAvailableSlots, snapToSlot, addMinutes, compareTime, } from './useTimeUtils';
 export { useScheduleDrag } from './useScheduleDrag';
 export { useFormBuilder, evaluateCondition } from './useFormBuilder';
+export { usePluginConfig, type UsePluginConfigReturn } from './usePluginConfig';
 export { getFieldRegistryEntry, getTypeDefault, type RegistryEntry, } from './formBuilderRegistry';

package/dist/composables/index.js

@@ -16,6 +16,7 @@ import { useSequenceUtils } from "./useSequenceUtils.js";
 import { addMinutes, compareTime, durationMinutes, findAvailableSlots, formatDuration, formatTime, generateTimeSlots, isTimeInRange, parseTime, rangesOverlap, snapToSlot } from "./useTimeUtils.js";
 import { useScheduleDrag } from "./useScheduleDrag.js";
 import { evaluateCondition, useFormBuilder } from "./useFormBuilder.js";
+import { usePluginConfig } from "./usePluginConfig.js";
 import { getFieldRegistryEntry, getTypeDefault } from "./formBuilderRegistry.js";
 export {
   ATOMIC_WEIGHTS,
@@ -44,6 +45,7 @@ export {
   useFormBuilder,
   usePasskey,
   usePlatformContext,
+  usePluginConfig,
   useProtocolTemplates,
   useRackEditor,
   useScheduleDrag,

package/dist/composables/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/composables/usePluginConfig.d.ts

@@ -0,0 +1,12 @@
+import { Ref, ComputedRef } from 'vue';
+export interface UsePluginConfigReturn {
+    config: Ref<Record<string, unknown>>;
+    isLoading: Ref<boolean>;
+    isSaving: Ref<boolean>;
+    error: Ref<string | null>;
+    isDirty: ComputedRef<boolean>;
+    load: () => Promise<void>;
+    save: () => Promise<boolean>;
+    reset: () => void;
+}
+export declare function usePluginConfig(pluginName?: string): UsePluginConfigReturn;

package/dist/composables/usePluginConfig.js

@@ -0,0 +1,77 @@
+import { computed, ref, onMounted } from "vue";
+import { useApi } from "./useApi.js";
+import { usePlatformContext } from "./usePlatformContext.js";
+function usePluginConfig(pluginName) {
+  const api = useApi();
+  const { plugin } = usePlatformContext();
+  const resolvedName = computed(() => {
+    var _a;
+    return pluginName ?? ((_a = plugin.value) == null ? void 0 : _a.name) ?? "";
+  });
+  const config = ref({});
+  const savedConfig = ref({});
+  const isLoading = ref(false);
+  const isSaving = ref(false);
+  const error = ref(null);
+  const isDirty = computed(() => {
+    return JSON.stringify(config.value) !== JSON.stringify(savedConfig.value);
+  });
+  async function load() {
+    const name = resolvedName.value;
+    if (!name) return;
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const response = await api.get(
+        `/api/plugins/${encodeURIComponent(name)}/config`
+      );
+      config.value = { ...response.config };
+      savedConfig.value = { ...response.config };
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Failed to load plugin config";
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  async function save() {
+    const name = resolvedName.value;
+    if (!name) return false;
+    isSaving.value = true;
+    error.value = null;
+    try {
+      const response = await api.put(
+        `/api/plugins/${encodeURIComponent(name)}/config`,
+        { config: config.value }
+      );
+      config.value = { ...response.config };
+      savedConfig.value = { ...response.config };
+      return true;
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Failed to save plugin config";
+      return false;
+    } finally {
+      isSaving.value = false;
+    }
+  }
+  function reset() {
+    config.value = { ...savedConfig.value };
+    error.value = null;
+  }
+  onMounted(() => {
+    load();
+  });
+  return {
+    config,
+    isLoading,
+    isSaving,
+    error,
+    isDirty,
+    load,
+    save,
+    reset
+  };
+}
+export {
+  usePluginConfig
+};
+//# sourceMappingURL=usePluginConfig.js.map

package/dist/composables/usePluginConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePluginConfig.js","sources":["../../src/composables/usePluginConfig.ts"],"sourcesContent":["import { ref, computed, onMounted, type Ref, type ComputedRef } from 'vue'\nimport { useApi } from './useApi'\nimport { usePlatformContext } from './usePlatformContext'\n\nexport interface UsePluginConfigReturn {\n  config: Ref<Record<string, unknown>>\n  isLoading: Ref<boolean>\n  isSaving: Ref<boolean>\n  error: Ref<string | null>\n  isDirty: ComputedRef<boolean>\n  load: () => Promise<void>\n  save: () => Promise<boolean>\n  reset: () => void\n}\n\nexport function usePluginConfig(pluginName?: string): UsePluginConfigReturn {\n  const api = useApi()\n  const { plugin } = usePlatformContext()\n\n  const resolvedName = computed(() => pluginName ?? plugin.value?.name ?? '')\n\n  const config = ref<Record<string, unknown>>({})\n  const savedConfig = ref<Record<string, unknown>>({})\n  const isLoading = ref(false)\n  const isSaving = ref(false)\n  const error = ref<string | null>(null)\n\n  const isDirty = computed(() => {\n    return JSON.stringify(config.value) !== JSON.stringify(savedConfig.value)\n  })\n\n  async function load(): Promise<void> {\n    const name = resolvedName.value\n    if (!name) return\n\n    isLoading.value = true\n    error.value = null\n    try {\n      const response = await api.get<{ plugin_name: string; config: Record<string, unknown> }>(\n        `/api/plugins/${encodeURIComponent(name)}/config`,\n      )\n      config.value = { ...response.config }\n      savedConfig.value = { ...response.config }\n    } catch (e) {\n      error.value = e instanceof Error ? e.message : 'Failed to load plugin config'\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  async function save(): Promise<boolean> {\n    const name = resolvedName.value\n    if (!name) return false\n\n    isSaving.value = true\n    error.value = null\n    try {\n      const response = await api.put<{ plugin_name: string; config: Record<string, unknown> }>(\n        `/api/plugins/${encodeURIComponent(name)}/config`,\n        { config: config.value },\n      )\n      config.value = { ...response.config }\n      savedConfig.value = { ...response.config }\n      return true\n    } catch (e) {\n      error.value = e instanceof Error ? e.message : 'Failed to save plugin config'\n      return false\n    } finally {\n      isSaving.value = false\n    }\n  }\n\n  function reset(): void {\n    config.value = { ...savedConfig.value }\n    error.value = null\n  }\n\n  onMounted(() => {\n    load()\n  })\n\n  return {\n    config,\n    isLoading,\n    isSaving,\n    error,\n    isDirty,\n    load,\n    save,\n    reset,\n  }\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,gBAAgB,YAA4C;AAC1E,QAAM,MAAM,OAAA;AACZ,QAAM,EAAE,OAAA,IAAW,mBAAA;AAEnB,QAAM,eAAe,SAAS,MAAA;;AAAM,2BAAc,YAAO,UAAP,mBAAc,SAAQ;AAAA,GAAE;AAE1E,QAAM,SAAS,IAA6B,EAAE;AAC9C,QAAM,cAAc,IAA6B,EAAE;AACnD,QAAM,YAAY,IAAI,KAAK;AAC3B,QAAM,WAAW,IAAI,KAAK;AAC1B,QAAM,QAAQ,IAAmB,IAAI;AAErC,QAAM,UAAU,SAAS,MAAM;AAC7B,WAAO,KAAK,UAAU,OAAO,KAAK,MAAM,KAAK,UAAU,YAAY,KAAK;AAAA,EAC1E,CAAC;AAED,iBAAe,OAAsB;AACnC,UAAM,OAAO,aAAa;AAC1B,QAAI,CAAC,KAAM;AAEX,cAAU,QAAQ;AAClB,UAAM,QAAQ;AACd,QAAI;AACF,YAAM,WAAW,MAAM,IAAI;AAAA,QACzB,gBAAgB,mBAAmB,IAAI,CAAC;AAAA,MAAA;AAE1C,aAAO,QAAQ,EAAE,GAAG,SAAS,OAAA;AAC7B,kBAAY,QAAQ,EAAE,GAAG,SAAS,OAAA;AAAA,IACpC,SAAS,GAAG;AACV,YAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;AAAA,IACjD,UAAA;AACE,gBAAU,QAAQ;AAAA,IACpB;AAAA,EACF;AAEA,iBAAe,OAAyB;AACtC,UAAM,OAAO,aAAa;AAC1B,QAAI,CAAC,KAAM,QAAO;AAElB,aAAS,QAAQ;AACjB,UAAM,QAAQ;AACd,QAAI;AACF,YAAM,WAAW,MAAM,IAAI;AAAA,QACzB,gBAAgB,mBAAmB,IAAI,CAAC;AAAA,QACxC,EAAE,QAAQ,OAAO,MAAA;AAAA,MAAM;AAEzB,aAAO,QAAQ,EAAE,GAAG,SAAS,OAAA;AAC7B,kBAAY,QAAQ,EAAE,GAAG,SAAS,OAAA;AAClC,aAAO;AAAA,IACT,SAAS,GAAG;AACV,YAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;AAC/C,aAAO;AAAA,IACT,UAAA;AACE,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF;AAEA,WAAS,QAAc;AACrB,WAAO,QAAQ,EAAE,GAAG,YAAY,MAAA;AAChC,UAAM,QAAQ;AAAA,EAChB;AAEA,YAAU,MAAM;AACd,SAAA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { MLDSdk, default } from './install';
 export { BaseButton, BaseInput, BaseTextarea, BaseSelect, BaseCheckbox, BaseToggle, BaseRadioGroup, BaseSlider, ColorSlider, BaseTabs, BaseModal, FormField, DatePicker, TimePicker, TagsInput, NumberInput, FileUploader, AlertBox, ToastNotification, IconButton, ThemeToggle, SettingsButton, CollapsibleCard, AppTopBar, AppSidebar, AppLayout, AppContainer, Skeleton, WellPlate, RackEditor, SampleLegend, PlateMapEditor, ExperimentTimeline, SampleSelector, GroupingModal, GroupAssigner, MoleculeInput, ConcentrationInput, DoseCalculator, ReagentList, SampleHierarchyTree, ProtocolStepEditor, SegmentedControl, MultiSelect, BasePill, DropdownButton, Calendar, DataFrame, LoadingSpinner, Divider, StatusIndicator, ProgressBar, Avatar, EmptyState, Breadcrumb, Tooltip, ConfirmDialog, ChartContainer, SettingsModal, ScientificNumber, ChemicalFormula, FormulaInput, SequenceInput, UnitInput, StepWizard, AuditTrail, BatchProgressList, DateTimePicker, TimeRangeInput, ScheduleCalendar, ResourceCard, } from './components';
-export { useApi, useAuth, usePasskey, useTheme, useToast, usePlatformContext, useWellPlateEditor, useConcentrationUnits, useDoseCalculator, useProtocolTemplates, useRackEditor, useChemicalFormula, ATOMIC_WEIGHTS, useSequenceUtils, type ApiClientOptions, type UseWellPlateEditorOptions, type UseWellPlateEditorReturn, type UseRackEditorOptions, type UseRackEditorReturn, type ConcentrationValue, type ConcentrationUnit, type VolumeValue, type VolumeUnit, type StepTemplate, type FormulaParseResult, type FormulaPart, type SequenceType, type SequenceStats, parseTime, formatTime, generateTimeSlots, rangesOverlap, durationMinutes, formatDuration, isTimeInRange, findAvailableSlots, snapToSlot, addMinutes, compareTime, useScheduleDrag, } from './composables';
+export { useApi, useAuth, usePasskey, useTheme, useToast, usePlatformContext, useWellPlateEditor, useConcentrationUnits, useDoseCalculator, useProtocolTemplates, useRackEditor, useChemicalFormula, ATOMIC_WEIGHTS, useSequenceUtils, type ApiClientOptions, type UseWellPlateEditorOptions, type UseWellPlateEditorReturn, type UseRackEditorOptions, type UseRackEditorReturn, type ConcentrationValue, type ConcentrationUnit, type VolumeValue, type VolumeUnit, type StepTemplate, type FormulaParseResult, type FormulaPart, type SequenceType, type SequenceStats, parseTime, formatTime, generateTimeSlots, rangesOverlap, durationMinutes, formatDuration, isTimeInRange, findAvailableSlots, snapToSlot, addMinutes, compareTime, useScheduleDrag, usePluginConfig, type UsePluginConfigReturn, } from './composables';
 export { useAuthStore, useSettingsStore, colorPalettes, type SettingsState, } from './stores';
 export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, ResourceStatus, ResourceSpec, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, RegisterRequest, UpdateProfileRequest, CredentialInfo, PluginInfo, PluginNavItem, PluginSettings, PluginSettingField, PlatformContext, PlatformEventType, PlatformEvent, ThemeMode, ColorPalette, TableDensity, } from './types';

package/dist/index.js

@@ -156,6 +156,7 @@ import { ATOMIC_WEIGHTS, useChemicalFormula } from "./composables/useChemicalFor
 import { useSequenceUtils } from "./composables/useSequenceUtils.js";
 import { addMinutes, compareTime, durationMinutes, findAvailableSlots, formatDuration, formatTime, generateTimeSlots, isTimeInRange, parseTime, rangesOverlap, snapToSlot } from "./composables/useTimeUtils.js";
 import { useScheduleDrag } from "./composables/useScheduleDrag.js";
+import { usePluginConfig } from "./composables/usePluginConfig.js";
 import { useAuthStore } from "./stores/auth.js";
 import { colorPalettes, useSettingsStore } from "./stores/settings.js";
 export {
@@ -253,6 +254,7 @@ export {
   useDoseCalculator,
   usePasskey,
   usePlatformContext,
+  usePluginConfig,
   useProtocolTemplates,
   useRackEditor,
   useScheduleDrag,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles.css

@@ -28,8 +28,9 @@
   --text-muted: #94A3B8;
 
   /* Brand colors */
-  --color-primary: #3B82F6;
-  --color-primary-hover: #2563EB;
+  --color-primary: #6366F1;
+  --color-primary-hover: #4F46E5;
+  --color-primary-soft: rgba(99, 102, 241, 0.12);
   --color-cta: #F97316;
   --color-cta-hover: #EA580C;
   --color-purple: #8B5CF6;
@@ -289,7 +290,7 @@ code, pre {
 }
 .input-modern:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }
 .input-modern::placeholder {
   color: var(--text-muted);
@@ -318,7 +319,7 @@ code, pre {
 }
 .select-modern:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }
 /* Label styles */
 .label-modern {
@@ -493,7 +494,7 @@ code, pre {
   border-color: var(--border-color);
 }
 .bg-mld-primary {
-  background-color: #3B82F6;
+  background-color: var(--color-primary);
 }
 .text-mld-primary {
   color: var(--color-primary);
@@ -502,10 +503,10 @@ code, pre {
   border-color: var(--color-primary);
 }
 .bg-mld-primary\/5 {
-  background-color: rgba(59, 130, 246, 0.05);
+  background-color: rgba(99, 102, 241, 0.05);
 }
 .hover\:border-mld-primary\/50:hover {
-  border-color: rgba(59, 130, 246, 0.5);
+  border-color: rgba(99, 102, 241, 0.5);
 }
 /* Danger/error color utilities */
 .text-mld-danger {
@@ -561,10 +562,10 @@ code, pre {
   background-color: #DC2626;
 }
 .bg-mld-primary\/10 {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: rgba(99, 102, 241, 0.1);
 }
 .hover\:bg-mld-primary\/20:hover {
-  background-color: rgba(59, 130, 246, 0.2);
+  background-color: rgba(99, 102, 241, 0.2);
 }
 .bg-mld-info {
   background-color: var(--mld-info);
@@ -594,10 +595,10 @@ code, pre {
   color: var(--color-primary);
 }
 .text-mld-primary\/80 {
-  color: rgba(59, 130, 246, 0.8);
+  color: rgba(99, 102, 241, 0.8);
 }
 .hover\:text-mld-primary\/70:hover {
-  color: rgba(59, 130, 246, 0.7);
+  color: rgba(99, 102, 241, 0.7);
 }
 /* ==========================================================================
    Border Color Utilities (Tailwind v4 compatibility)
@@ -1248,7 +1249,7 @@ html.dark .focus\:ring-offset-2:focus {
 .mld-topbar__logo-icon {
   width: 2rem;
   height: 2rem;
-  background-color: var(--color-primary, #3B82F6);
+  background-color: var(--color-primary, #6366F1);
   border-radius: 0.5rem;
   display: flex;
   align-items: center;
@@ -1377,8 +1378,8 @@ html.dark .focus\:ring-offset-2:focus {
   background: var(--mld-bg-hover, rgba(0, 0, 0, 0.05));
 }
 .mld-topbar-dropdown-item--active {
-  background: var(--mld-info-bg, rgba(59, 130, 246, 0.1));
-  color: var(--mld-info, #3b82f6);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary, #6366F1);
 }
 .mld-topbar-dropdown-item--disabled {
   opacity: 0.5;
@@ -1393,7 +1394,7 @@ html.dark .focus\:ring-offset-2:focus {
   margin-top: 0.125rem;
 }
 .mld-topbar-dropdown-item--active .mld-topbar-dropdown-item__description {
-  color: var(--mld-info, #3b82f6);
+  color: var(--color-primary, #6366F1);
   opacity: 0.8;
 }
 /* Tabs in center of topbar */
@@ -1425,8 +1426,8 @@ html.dark .focus\:ring-offset-2:focus {
   color: var(--mld-text-primary, #111827);
 }
 .mld-topbar-tab--active {
-  background: var(--mld-primary-bg, rgba(99, 102, 241, 0.1));
-  color: var(--mld-primary, #6366f1);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary, #6366F1);
 }
 .mld-topbar-tab--disabled {
   opacity: 0.5;
@@ -1481,13 +1482,13 @@ html.dark .focus\:ring-offset-2:focus {
   border: none;
   background: transparent;
   border-radius: var(--mld-radius-sm, 0.25rem);
-  color: #2563EB;
+  color: var(--color-primary, #6366F1);
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.15s ease;
 }
 .mld-topbar__admin-btn:hover {
-  background: rgba(37, 99, 235, 0.1);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
 }
 .mld-topbar__admin-icon {
   width: 1.25rem;
@@ -1518,7 +1519,7 @@ html.dark .focus\:ring-offset-2:focus {
   font-size: 0.75rem;
   font-weight: 500;
   color: white;
-  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
+  background: linear-gradient(135deg, var(--color-primary-hover, #4F46E5) 0%, var(--color-primary, #6366F1) 100%);
   flex-shrink: 0;
 }
 .mld-topbar__profile-name {
@@ -3079,9 +3080,11 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 }
 .mld-form-field__label {
   display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
 }
 .mld-form-field__required {
   color: var(--mld-error);
@@ -3363,6 +3366,7 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 /* NumberInput Component Styles */
 .mld-number-input {
   display: inline-flex;
+  max-width: 100%;
   border-radius: 0.5rem;
   border: 1px solid var(--border-color);
   overflow: hidden;
@@ -3395,6 +3399,7 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   background-color: var(--bg-tertiary);
   color: var(--text-muted);
   border: none;
@@ -3429,7 +3434,8 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
   height: 1rem;
 }
 .mld-number-input__input {
-  width: 5rem;
+  flex: 1;
+  min-width: 0;
   text-align: center;
   background-color: var(--bg-secondary);
   color: var(--text-primary);
@@ -4466,7 +4472,7 @@ html.dark .mld-slider__track {
   padding: 0.125rem 0.375rem;
   font-size: 0.75rem;
   border-radius: 9999px;
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
   color: var(--color-primary);
 }
 /* TagsInput Component Styles */
@@ -12876,7 +12882,7 @@ html.dark .mld-slider__track {
   padding: 0.125rem 0.375rem;
   font-size: 0.75rem;
   border-radius: 9999px;
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
   color: var(--color-primary);
 }
 /* BaseModal Component Styles */
@@ -14158,9 +14164,11 @@ to { transform: rotate(360deg);
 }
 .mld-form-field__label {
   display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
 }
 .mld-form-field__required {
   color: var(--mld-error);
@@ -14652,6 +14660,7 @@ to { transform: rotate(360deg);
 /* NumberInput Component Styles */
 .mld-number-input {
   display: inline-flex;
+  max-width: 100%;
   border-radius: 0.5rem;
   border: 1px solid var(--border-color);
   overflow: hidden;
@@ -14684,6 +14693,7 @@ to { transform: rotate(360deg);
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   background-color: var(--bg-tertiary);
   color: var(--text-muted);
   border: none;
@@ -14718,7 +14728,8 @@ to { transform: rotate(360deg);
   height: 1rem;
 }
 .mld-number-input__input {
-  width: 5rem;
+  flex: 1;
+  min-width: 0;
   text-align: center;
   background-color: var(--bg-secondary);
   color: var(--text-primary);
@@ -15846,7 +15857,7 @@ html.dark .mld-settings-modal__option-btn--active {
 .mld-topbar__logo-icon {
   width: 2rem;
   height: 2rem;
-  background-color: var(--color-primary, #3B82F6);
+  background-color: var(--color-primary, #6366F1);
   border-radius: 0.5rem;
   display: flex;
   align-items: center;
@@ -15977,8 +15988,8 @@ html.dark .mld-settings-modal__option-btn--active {
   background: var(--mld-bg-hover, rgba(0, 0, 0, 0.05));
 }
 .mld-topbar-dropdown-item--active {
-  background: var(--mld-info-bg, rgba(59, 130, 246, 0.1));
-  color: var(--mld-info, #3b82f6);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary, #6366F1);
 }
 .mld-topbar-dropdown-item--disabled {
   opacity: 0.5;
@@ -15993,7 +16004,7 @@ html.dark .mld-settings-modal__option-btn--active {
   margin-top: 0.125rem;
 }
 .mld-topbar-dropdown-item--active .mld-topbar-dropdown-item__description {
-  color: var(--mld-info, #3b82f6);
+  color: var(--color-primary, #6366F1);
   opacity: 0.8;
 }
 
@@ -16026,8 +16037,8 @@ html.dark .mld-settings-modal__option-btn--active {
   color: var(--mld-text-primary, #111827);
 }
 .mld-topbar-tab--active {
-  background: var(--mld-primary-bg, rgba(99, 102, 241, 0.1));
-  color: var(--mld-primary, #6366f1);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary, #6366F1);
 }
 .mld-topbar-tab--disabled {
   opacity: 0.5;
@@ -16084,13 +16095,13 @@ html.dark .mld-settings-modal__option-btn--active {
   border: none;
   background: transparent;
   border-radius: var(--mld-radius-sm, 0.25rem);
-  color: #2563EB;
+  color: var(--color-primary, #6366F1);
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.15s ease;
 }
 .mld-topbar__admin-btn:hover {
-  background: rgba(37, 99, 235, 0.1);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
 }
 .mld-topbar__admin-icon {
   width: 1.25rem;
@@ -16122,7 +16133,7 @@ html.dark .mld-settings-modal__option-btn--active {
   font-size: 0.75rem;
   font-weight: 500;
   color: white;
-  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
+  background: linear-gradient(135deg, var(--color-primary-hover, #4F46E5) 0%, var(--color-primary, #6366F1) 100%);
   flex-shrink: 0;
 }
 .mld-topbar__profile-name {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/composables/index.ts

@@ -86,6 +86,7 @@ export {
 } from './useTimeUtils'
 export { useScheduleDrag } from './useScheduleDrag'
 export { useFormBuilder, evaluateCondition } from './useFormBuilder'
+export { usePluginConfig, type UsePluginConfigReturn } from './usePluginConfig'
 export {
   getFieldRegistryEntry,
   getTypeDefault,

package/src/composables/usePluginConfig.ts

@@ -0,0 +1,92 @@
+import { ref, computed, onMounted, type Ref, type ComputedRef } from 'vue'
+import { useApi } from './useApi'
+import { usePlatformContext } from './usePlatformContext'
+
+export interface UsePluginConfigReturn {
+  config: Ref<Record<string, unknown>>
+  isLoading: Ref<boolean>
+  isSaving: Ref<boolean>
+  error: Ref<string | null>
+  isDirty: ComputedRef<boolean>
+  load: () => Promise<void>
+  save: () => Promise<boolean>
+  reset: () => void
+}
+
+export function usePluginConfig(pluginName?: string): UsePluginConfigReturn {
+  const api = useApi()
+  const { plugin } = usePlatformContext()
+
+  const resolvedName = computed(() => pluginName ?? plugin.value?.name ?? '')
+
+  const config = ref<Record<string, unknown>>({})
+  const savedConfig = ref<Record<string, unknown>>({})
+  const isLoading = ref(false)
+  const isSaving = ref(false)
+  const error = ref<string | null>(null)
+
+  const isDirty = computed(() => {
+    return JSON.stringify(config.value) !== JSON.stringify(savedConfig.value)
+  })
+
+  async function load(): Promise<void> {
+    const name = resolvedName.value
+    if (!name) return
+
+    isLoading.value = true
+    error.value = null
+    try {
+      const response = await api.get<{ plugin_name: string; config: Record<string, unknown> }>(
+        `/api/plugins/${encodeURIComponent(name)}/config`,
+      )
+      config.value = { ...response.config }
+      savedConfig.value = { ...response.config }
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Failed to load plugin config'
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function save(): Promise<boolean> {
+    const name = resolvedName.value
+    if (!name) return false
+
+    isSaving.value = true
+    error.value = null
+    try {
+      const response = await api.put<{ plugin_name: string; config: Record<string, unknown> }>(
+        `/api/plugins/${encodeURIComponent(name)}/config`,
+        { config: config.value },
+      )
+      config.value = { ...response.config }
+      savedConfig.value = { ...response.config }
+      return true
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Failed to save plugin config'
+      return false
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  function reset(): void {
+    config.value = { ...savedConfig.value }
+    error.value = null
+  }
+
+  onMounted(() => {
+    load()
+  })
+
+  return {
+    config,
+    isLoading,
+    isSaving,
+    error,
+    isDirty,
+    load,
+    save,
+    reset,
+  }
+}

package/src/index.ts

@@ -133,6 +133,9 @@ export {
   compareTime,
   // Schedule drag
   useScheduleDrag,
+  // Plugin config
+  usePluginConfig,
+  type UsePluginConfigReturn,
 } from './composables'
 
 // Stores

package/src/styles/components/app-top-bar.css

@@ -49,7 +49,7 @@
 .mld-topbar__logo-icon {
   width: 2rem;
   height: 2rem;
-  background-color: var(--color-primary, #3B82F6);
+  background-color: var(--color-primary, #6366F1);
   border-radius: 0.5rem;
   display: flex;
   align-items: center;
@@ -199,8 +199,8 @@
 }
 
 .mld-topbar-dropdown-item--active {
-  background: var(--mld-info-bg, rgba(59, 130, 246, 0.1));
-  color: var(--mld-info, #3b82f6);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary, #6366F1);
 }
 
 .mld-topbar-dropdown-item--disabled {
@@ -219,7 +219,7 @@
 }
 
 .mld-topbar-dropdown-item--active .mld-topbar-dropdown-item__description {
-  color: var(--mld-info, #3b82f6);
+  color: var(--color-primary, #6366F1);
   opacity: 0.8;
 }
 
@@ -256,8 +256,8 @@
 }
 
 .mld-topbar-tab--active {
-  background: var(--mld-primary-bg, rgba(99, 102, 241, 0.1));
-  color: var(--mld-primary, #6366f1);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary, #6366F1);
 }
 
 .mld-topbar-tab--disabled {
@@ -320,14 +320,14 @@
   border: none;
   background: transparent;
   border-radius: var(--mld-radius-sm, 0.25rem);
-  color: #2563EB;
+  color: var(--color-primary, #6366F1);
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.15s ease;
 }
 
 .mld-topbar__admin-btn:hover {
-  background: rgba(37, 99, 235, 0.1);
+  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
 }
 
 .mld-topbar__admin-icon {
@@ -362,7 +362,7 @@
   font-size: 0.75rem;
   font-weight: 500;
   color: white;
-  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
+  background: linear-gradient(135deg, var(--color-primary-hover, #4F46E5) 0%, var(--color-primary, #6366F1) 100%);
   flex-shrink: 0;
 }
 

package/src/styles/components/form-field.css

@@ -8,9 +8,11 @@
 
 .mld-form-field__label {
   display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
 }
 
 .mld-form-field__required {

package/src/styles/components/number-input.css

@@ -2,6 +2,7 @@
 
 .mld-number-input {
   display: inline-flex;
+  max-width: 100%;
   border-radius: 0.5rem;
   border: 1px solid var(--border-color);
   overflow: hidden;
@@ -42,6 +43,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   background-color: var(--bg-tertiary);
   color: var(--text-muted);
   border: none;
@@ -85,7 +87,8 @@
 }
 
 .mld-number-input__input {
-  width: 5rem;
+  flex: 1;
+  min-width: 0;
   text-align: center;
   background-color: var(--bg-secondary);
   color: var(--text-primary);

package/src/styles/components/tabs.css

@@ -103,6 +103,6 @@
   padding: 0.125rem 0.375rem;
   font-size: 0.75rem;
   border-radius: 9999px;
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
   color: var(--color-primary);
 }

package/src/styles/variables.css

@@ -24,8 +24,9 @@
   --text-muted: #94A3B8;
 
   /* Brand colors */
-  --color-primary: #3B82F6;
-  --color-primary-hover: #2563EB;
+  --color-primary: #6366F1;
+  --color-primary-hover: #4F46E5;
+  --color-primary-soft: rgba(99, 102, 241, 0.12);
   --color-cta: #F97316;
   --color-cta-hover: #EA580C;
   --color-purple: #8B5CF6;
@@ -308,7 +309,7 @@ code, pre {
 
 .input-modern:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }
 
 .input-modern::placeholder {
@@ -341,7 +342,7 @@ code, pre {
 
 .select-modern:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }
 
 /* Label styles */
@@ -549,7 +550,7 @@ code, pre {
 }
 
 .bg-mld-primary {
-  background-color: #3B82F6;
+  background-color: var(--color-primary);
 }
 
 .text-mld-primary {
@@ -561,11 +562,11 @@ code, pre {
 }
 
 .bg-mld-primary\/5 {
-  background-color: rgba(59, 130, 246, 0.05);
+  background-color: rgba(99, 102, 241, 0.05);
 }
 
 .hover\:border-mld-primary\/50:hover {
-  border-color: rgba(59, 130, 246, 0.5);
+  border-color: rgba(99, 102, 241, 0.5);
 }
 
 /* Danger/error color utilities */
@@ -638,11 +639,11 @@ code, pre {
 }
 
 .bg-mld-primary\/10 {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: rgba(99, 102, 241, 0.1);
 }
 
 .hover\:bg-mld-primary\/20:hover {
-  background-color: rgba(59, 130, 246, 0.2);
+  background-color: rgba(99, 102, 241, 0.2);
 }
 
 .bg-mld-info {
@@ -681,11 +682,11 @@ code, pre {
 }
 
 .text-mld-primary\/80 {
-  color: rgba(59, 130, 246, 0.8);
+  color: rgba(99, 102, 241, 0.8);
 }
 
 .hover\:text-mld-primary\/70:hover {
-  color: rgba(59, 130, 246, 0.7);
+  color: rgba(99, 102, 241, 0.7);
 }
 
 /* ==========================================================================