From 02e90d48bd991ac430f027422b76ee0e6dd54ef4 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Wed, 4 Feb 2026 22:01:25 +0100 Subject: [PATCH 01/45] feat: update color variables and styles for improved UI consistency --- .../d-flow-folder/DFlowFolder.style.scss | 25 ++- .../d-flow-input/DFlowInputDataType.tsx | 2 +- .../DFlowInputDataTypeEditDialog.tsx | 2 +- src/components/d-flow/DFlow.tsx | 1 + .../d-fullscreen/DFullScreen.style.scss | 5 + src/components/d-layout/DLayout.style.scss | 2 +- .../d-resizable/DResizable.stories.tsx | 142 +++++++++++------- .../d-resizable/DResizable.style.scss | 9 +- src/components/file-tabs/FileTabs.style.scss | 13 +- .../SegmentedControl.style.scss | 15 -- src/styles/_variables.scss | 4 +- src/utils/types.ts | 2 +- 12 files changed, 118 insertions(+), 104 deletions(-) diff --git a/src/components/d-flow-folder/DFlowFolder.style.scss b/src/components/d-flow-folder/DFlowFolder.style.scss index 131230a24..1bd49fab2 100644 --- a/src/components/d-flow-folder/DFlowFolder.style.scss +++ b/src/components/d-flow-folder/DFlowFolder.style.scss @@ -29,15 +29,14 @@ & { @include helpers.borderRadius(); - @include box.box(variables.$primary); - @include box.boxHover(variables.$secondary); + @include box.boxHover(variables.$tertiary); @include helpers.fontStyle(); border: none; - background: variables.$primary; + background: transparent; } &[data-state=open] { - @include box.boxActiveStyle(variables.$secondary); + @include box.boxActiveStyle(variables.$tertiary); border: none; } @@ -57,7 +56,7 @@ &:before { height: 100%; width: 1px; - background: helpers.backgroundColor(variables.$secondary); + background: helpers.backgroundColor(variables.$tertiary); position: absolute; content: ""; left: 5px; @@ -78,25 +77,25 @@ & { @include helpers.borderRadius(); - @include box.box(variables.$primary); - @include box.boxHover(variables.$secondary); - @include box.boxActive(variables.$secondary); + @include box.boxHover(variables.$tertiary); + @include box.boxActive(variables.$tertiary); @include helpers.fontStyle(); border: none; + background: transparent; } &-hover-card { - @include box.box(variables.$secondary); - @include box.boxActiveStyle(variables.$secondary); - @include box.boxHover(variables.$secondary); - @include box.boxActive(variables.$secondary); + @include box.box(variables.$tertiary); + @include box.boxActiveStyle(variables.$tertiary); + @include box.boxHover(variables.$tertiary); + @include box.boxActive(variables.$tertiary); @include helpers.borderRadius(); cursor: pointer; border: none; } &[data-state=open], &--active { - @include box.boxActiveStyle(variables.$secondary); + @include box.boxActiveStyle(variables.$tertiary); border: none; } } diff --git a/src/components/d-flow-input/DFlowInputDataType.tsx b/src/components/d-flow-input/DFlowInputDataType.tsx index c51779a3c..4a67dcd82 100644 --- a/src/components/d-flow-input/DFlowInputDataType.tsx +++ b/src/components/d-flow-input/DFlowInputDataType.tsx @@ -60,7 +60,7 @@ export const DFlowInputDataType: React.FC = (props) => - diff --git a/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx b/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx index b54309df9..7a704cd2c 100644 --- a/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx +++ b/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx @@ -122,7 +122,7 @@ export const DFlowInputDataTypeEditDialog: React.FC - diff --git a/src/components/d-flow/DFlow.tsx b/src/components/d-flow/DFlow.tsx index 452bc7aaf..714403d28 100644 --- a/src/components/d-flow/DFlow.tsx +++ b/src/components/d-flow/DFlow.tsx @@ -696,6 +696,7 @@ const InternalDFlow: React.FC = (props) => { onNodesChange={nodeChangeEvent} onEdgesChange={edgeChangeEvent} {...mergeCode0Props("flow", props)} + proOptions={{hideAttribution: true}} nodes={nodes} edges={edges} > diff --git a/src/components/d-fullscreen/DFullScreen.style.scss b/src/components/d-fullscreen/DFullScreen.style.scss index 4d2506d22..2949f77b5 100644 --- a/src/components/d-fullscreen/DFullScreen.style.scss +++ b/src/components/d-fullscreen/DFullScreen.style.scss @@ -1,6 +1,11 @@ +@use "../../styles/variables"; +@use "../../styles/helpers"; +@use "../../styles/box"; + .d-full-screen { position: relative; overflow: hidden; overscroll-behavior: contain; box-sizing: border-box; + background: helpers.backgroundColor(variables.$secondary); } \ No newline at end of file diff --git a/src/components/d-layout/DLayout.style.scss b/src/components/d-layout/DLayout.style.scss index ec0565213..0079bee77 100644 --- a/src/components/d-layout/DLayout.style.scss +++ b/src/components/d-layout/DLayout.style.scss @@ -42,7 +42,7 @@ &[aria-orientation=horizontal] { width: 100%; - height: 1px; + height: 0; } } diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index 6542dfcf9..e173a611c 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -7,9 +7,9 @@ import { IconArrowsMinimize, IconCircleDot, IconDatabase, - IconFile, + IconFile, IconInbox, IconMessageChatbot, - IconPlus + IconPlus, IconSearch } from "@tabler/icons-react"; import {ContextStoreProvider, useReactiveArrayService} from "../../utils"; import {FileTabsView} from "../file-tabs/FileTabs.view"; @@ -38,6 +38,10 @@ import {DFlowFunctionReactiveService, FunctionDefinitionView} from "../d-flow-fu import {DFlowTypeReactiveService, FlowTypeView} from "../d-flow-type"; import {Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipTrigger} from "../tooltip/Tooltip"; import {ButtonGroup} from "../button-group/ButtonGroup"; +import {Breadcrumb} from "../breadcrumb/Breadcrumb"; +import {TextInput} from "../form"; +import {Badge} from "../badge/Badge"; +import {PanelImperativeHandle, usePanelRef} from "react-resizable-panels"; const meta: Meta = { title: "Dashboard Resizable", @@ -223,61 +227,91 @@ export const Dashboard = () => { const [flowTypeStore, flowTypeService] = useReactiveArrayService(DFlowTypeReactiveService, [...FlowTypeData.map(data => new FlowTypeView(data))]); const [show, setShow] = React.useState(false); + const [isFolderCollapsed, setIsFolderCollapsed] = React.useState(false); + + const styles = React.useMemo(() => { + return !isFolderCollapsed ? {borderTopLeftRadius: "1rem"} : {borderTopLeftRadius: "0rem"} + }, [isFolderCollapsed]) return - - - - - - - - - - - - + +
+ + + + + + CodeZero Orga + projects + Discord Bot + flow + #1 + - } bottomContent={ - - - - }> - - - - - {show && ( - <> - - - - - - )} - - - - - + + +
+ + }> + + + + setIsFolderCollapsed(panelSize.asPercentage <= 0)} id={"1"} defaultSize={"20%"} collapsedSize={"0%"} collapsible minSize={"10%"}> + + + + + + + + + + }> + + + + + {show && ( + <> + + + + + + )} + + + + + - + + } @@ -287,10 +321,10 @@ const Folder = () => { const ref = React.useRef(null) return + - @@ -301,7 +335,7 @@ const Folder = () => { - + - + diff --git a/src/components/d-flow-panel/DFlowPanelSize.tsx b/src/components/d-flow-panel/DFlowPanelSize.tsx index d2e51f4e3..60699a52a 100644 --- a/src/components/d-flow-panel/DFlowPanelSize.tsx +++ b/src/components/d-flow-panel/DFlowPanelSize.tsx @@ -31,14 +31,14 @@ export const DFlowPanelSize: React.FC = () => { return - - - - + {getCurrentZoomInPercent()}% diff --git a/src/components/d-flow-panel/DFlowPanelUpdate.tsx b/src/components/d-flow-panel/DFlowPanelUpdate.tsx index e77a32889..87957fe11 100644 --- a/src/components/d-flow-panel/DFlowPanelUpdate.tsx +++ b/src/components/d-flow-panel/DFlowPanelUpdate.tsx @@ -52,7 +52,7 @@ export const DFlowPanelUpdate: React.FC = (props) => { {edited ? ( - diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index e173a611c..5790a9fa7 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -324,18 +324,18 @@ const Folder = () => { - - + Add new flow - + - + Open active flow @@ -356,7 +356,7 @@ const Folder = () => { - + Close all @@ -369,7 +369,7 @@ const Folder = () => { - + Open all diff --git a/src/components/d-resizable/DResizable.style.scss b/src/components/d-resizable/DResizable.style.scss index a197c268d..577d73eab 100644 --- a/src/components/d-resizable/DResizable.style.scss +++ b/src/components/d-resizable/DResizable.style.scss @@ -51,7 +51,7 @@ @include box.box(variables.$tertiary); @include box.boxHover(variables.$tertiary); @include box.boxActive(variables.$tertiary); - border: none; + box-shadow: none !important; } } diff --git a/src/components/editor/Editor.styles.scss b/src/components/editor/Editor.styles.scss index 1c2f91510..e09e8898b 100644 --- a/src/components/editor/Editor.styles.scss +++ b/src/components/editor/Editor.styles.scss @@ -45,8 +45,6 @@ & { @include box.box(variables.$secondary); @include helpers.borderRadius(); - border: none; - box-shadow: inset 0 1px 1px helpers.borderColor(); } > ul { @@ -78,7 +76,7 @@ @include helpers.noFocusStyle(); @include helpers.fontStyle(); @include helpers.disabled(); - border: none; + box-shadow: none; } &[aria-selected]{ diff --git a/src/components/file-tabs/FileTabs.style.scss b/src/components/file-tabs/FileTabs.style.scss index 2ca4ffba4..5c11f389b 100644 --- a/src/components/file-tabs/FileTabs.style.scss +++ b/src/components/file-tabs/FileTabs.style.scss @@ -48,12 +48,11 @@ @include helpers.borderRadius(); @include helpers.fontStyle(); background: transparent; - border: none; + box-shadow: none; } &[data-state="active"] { @include box.boxActiveStyle(variables.$secondary); - border: none; } } diff --git a/src/components/form/Input.style.scss b/src/components/form/Input.style.scss index b54c3ac40..082852bbc 100644 --- a/src/components/form/Input.style.scss +++ b/src/components/form/Input.style.scss @@ -68,6 +68,7 @@ &__control { background: none; + box-shadow: none; border: none; outline: none; margin: $padding $padding; diff --git a/src/components/menu/Menu.style.scss b/src/components/menu/Menu.style.scss index 73302065d..577f90430 100644 --- a/src/components/menu/Menu.style.scss +++ b/src/components/menu/Menu.style.scss @@ -44,12 +44,12 @@ @include helpers.noFocusStyle(); @include helpers.fontStyle(); @include helpers.disabled(); - border: none; + box-shadow: none; } &:focus, &[data-focus=true] { @include box.box(variables.$white, variables.$white, variables.$white); - border: none; + box-shadow: none; width: 100%; } } diff --git a/src/components/scroll-area/ScrollArea.style.scss b/src/components/scroll-area/ScrollArea.style.scss index 10417c65d..e25ccb399 100644 --- a/src/components/scroll-area/ScrollArea.style.scss +++ b/src/components/scroll-area/ScrollArea.style.scss @@ -33,9 +33,9 @@ cursor: grabbing; & { - @include box.box(); + @include box.box(variables.$tertiary); @include helpers.borderRadius(); - border-width: 0px; + box-shadow: none; } } diff --git a/src/components/segmented-control/SegmentedControl.style.scss b/src/components/segmented-control/SegmentedControl.style.scss index 39b57ed53..51fe8fa3a 100644 --- a/src/components/segmented-control/SegmentedControl.style.scss +++ b/src/components/segmented-control/SegmentedControl.style.scss @@ -30,7 +30,7 @@ @include helpers.disabled(); background: helpers.backgroundColor(variables.$secondary, 2); border-radius: variables.$borderRadius - (variables.$xxs / 2); - border: none; + box-shadow: none; } &:disabled { diff --git a/src/components/tooltip/Tooltip.style.scss b/src/components/tooltip/Tooltip.style.scss index 1b3c1b143..52751e27a 100644 --- a/src/components/tooltip/Tooltip.style.scss +++ b/src/components/tooltip/Tooltip.style.scss @@ -13,7 +13,7 @@ @include box.box(variables.$secondary); @include helpers.fontStyle(); @include helpers.borderRadius(); - border: none; + box-shadow: none; } } diff --git a/src/styles/_box.scss b/src/styles/_box.scss index 4ec3e59c7..fa66dbd69 100644 --- a/src/styles/_box.scss +++ b/src/styles/_box.scss @@ -12,7 +12,8 @@ $mixedBorderBlack: color.mix($borderColor, variables.$black, 25%); background: helpers.backgroundColor($background); - border: 1px solid helpers.borderColor($borderColor); + box-shadow: inset 0 1px 1px helpers.borderColor($borderColor); + border: none; color: helpers.color($color, variables.$hierarchySecondary); position: relative; box-sizing: border-box; @@ -26,6 +27,7 @@ ) { &:hover { background: helpers.backgroundColor($background, 1.25); + box-shadow: inset 0 1px 1px helpers.borderColor($borderColor); } } @@ -35,6 +37,7 @@ $borderColor: variables.$secondary ) { background: helpers.backgroundColor($background, 1.5); + box-shadow: inset 0 1px 1px helpers.borderColor($borderColor); outline: none; } From 59b37a8ebae645f42451dd70d31baaa13e9e04be Mon Sep 17 00:00:00 2001 From: nicosammito Date: Wed, 4 Feb 2026 23:40:26 +0100 Subject: [PATCH 03/45] feat: remove commented-out tooltip code for cleaner component structure --- .../d-flow-panel/DFlowPanelControl.tsx | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/src/components/d-flow-panel/DFlowPanelControl.tsx b/src/components/d-flow-panel/DFlowPanelControl.tsx index 0c89a3c4f..b51cf9423 100644 --- a/src/components/d-flow-panel/DFlowPanelControl.tsx +++ b/src/components/d-flow-panel/DFlowPanelControl.tsx @@ -64,29 +64,6 @@ export const DFlowPanelControl: React.FC = (props) => { return - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* To execute this flow you can call the following endpoint {" "}
*/} - {/* */} - {/* POST*/} - {/* */} - {/* */} - {/* localhost:6212/72hsa13/users/get*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} @@ -275,7 +275,7 @@ export const Dashboard = () => { + + + ) } \ No newline at end of file From d8d2c9c18d0b7ea879b11c8bc602f6c7a64df63e Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 00:22:14 +0100 Subject: [PATCH 08/45] feat: update primary color variable for improved design consistency --- src/styles/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 2295fee45..2eb3f076f 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,5 +1,5 @@ //colors -$primary: #030014; +$primary: #070514; $secondary: #bfbfbf; $tertiary: #ffffff; $info: #70ffb2; From 01b943d5b3bf898f4ffee4edea03c291d6908468 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 01:42:46 +0100 Subject: [PATCH 09/45] feat: adjust badge color opacity and update color mixing for improved visibility --- src/components/badge/Badge.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx index f549bf7ed..7f69cd22e 100644 --- a/src/components/badge/Badge.tsx +++ b/src/components/badge/Badge.tsx @@ -31,7 +31,7 @@ export const Badge: React.FC = (props) => { ...args.style, "--badge-color-background": mixColorRgb(color, 9), "--badge-color-border": withAlpha(color, 0.1), - "--badge-color": withAlpha(color, 1), + "--badge-color": withAlpha(color, 0.75), }, } )} @@ -79,7 +79,7 @@ const mixColorRgb = (color: string, level: number) => { const w = clamp01(level * 0.1) const c1 = parseCssColorToRgba(color) - const c2 = parseCssColorToRgba("#030014") + const c2 = parseCssColorToRgba("#070514") const mix = (a: number, b: number) => Math.round(a * (1 - w) + b * w) From 53f00902c28c0e9b9861c48bedc045a0b9958771 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 01:42:51 +0100 Subject: [PATCH 10/45] feat: specify scroll type for ScrollArea component for improved functionality --- src/components/d-flow-folder/DFlowFolder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/d-flow-folder/DFlowFolder.tsx b/src/components/d-flow-folder/DFlowFolder.tsx index 19c74f405..4736f5768 100644 --- a/src/components/d-flow-folder/DFlowFolder.tsx +++ b/src/components/d-flow-folder/DFlowFolder.tsx @@ -213,7 +213,7 @@ export const DFlowFolder = React.forwardRef }, [activeFlowId, computeDefaultOpen, resetEpoch]) return ( - +
From 1b83cb8ca3f1aff009ec541fb7c6fc8f1224c265 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 01:57:29 +0100 Subject: [PATCH 11/45] feat: enhance DResizable components with color support and background updates for improved UI --- .../d-flow-input/DFlowInputDataTypeEditDialog.tsx | 2 +- src/components/d-resizable/DResizable.stories.tsx | 2 +- src/components/d-resizable/DResizable.style.scss | 9 ++++++++- src/components/d-resizable/DResizable.tsx | 8 ++++---- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx b/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx index 7a704cd2c..63c7ce9c1 100644 --- a/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx +++ b/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx @@ -127,7 +127,7 @@ export const DFlowInputDataTypeEditDialog: React.FC }> - + diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index 7f09320dd..40a4c4ce9 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -268,7 +268,7 @@ export const Dashboard = () => { services={[[flowTypeStore, flowTypeService], [fileTabsStore, fileTabsService], [dataTypeStore, dataTypeService], [functionStore, functionService], [flowStore, flowService]]}> - setIsFolderCollapsed(panelSize.asPercentage <= 0)} id={"1"} defaultSize={"20%"} collapsedSize={"0%"} collapsible minSize={"10%"}> + setIsFolderCollapsed(panelSize.asPercentage <= 0)} id={"1"} defaultSize={"20%"} collapsedSize={"0%"} collapsible minSize={"10%"}> diff --git a/src/components/d-resizable/DResizable.style.scss b/src/components/d-resizable/DResizable.style.scss index 577d73eab..3c32497b4 100644 --- a/src/components/d-resizable/DResizable.style.scss +++ b/src/components/d-resizable/DResizable.style.scss @@ -54,6 +54,13 @@ box-shadow: none !important; } } +} - +@each $name, $color in variables.$colors { + .d-resizable__panel--#{$name} { + & { + background: helpers.backgroundColor($color); + border: none; + } + } } \ No newline at end of file diff --git a/src/components/d-resizable/DResizable.tsx b/src/components/d-resizable/DResizable.tsx index 4cdb8d706..d5c356681 100644 --- a/src/components/d-resizable/DResizable.tsx +++ b/src/components/d-resizable/DResizable.tsx @@ -1,25 +1,25 @@ "use client" import * as React from "react" -import {Code0ComponentProps} from "../../utils"; +import {Code0ComponentProps, Color} from "../../utils"; import {mergeCode0Props} from "../../utils"; import {Group, GroupProps, Panel, PanelProps, Separator, SeparatorProps} from "react-resizable-panels"; import "./DResizable.style.scss" type DResizablePanelGroupProps = Code0ComponentProps & GroupProps -type DResizablePanelProps = Code0ComponentProps & PanelProps +type DResizablePanelProps = Code0ComponentProps & PanelProps & {color?: Color} type DResizableHandleProps = Code0ComponentProps & SeparatorProps export const DResizablePanelGroup: React.FC = (props) => { return } export const DResizablePanel: React.FC = (props) => { - return + return } export const DResizableHandle: React.FC = (props) => { From c286a7c12d86e9e55e9ef79e38532b40da90cc2e Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 02:01:37 +0100 Subject: [PATCH 12/45] feat: update background color and badge color for improved UI consistency --- src/components/editor/Editor.styles.scss | 2 +- src/components/editor/Editor.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/editor/Editor.styles.scss b/src/components/editor/Editor.styles.scss index e09e8898b..975aae922 100644 --- a/src/components/editor/Editor.styles.scss +++ b/src/components/editor/Editor.styles.scss @@ -81,7 +81,7 @@ &[aria-selected]{ border: none; - background: helpers.backgroundColor(variables.$secondary, 1.5); + background: helpers.backgroundColor(variables.$secondary, 2); width: 100%; } } diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx index c26df5812..a60baab37 100644 --- a/src/components/editor/Editor.tsx +++ b/src/components/editor/Editor.tsx @@ -321,7 +321,7 @@ export const Editor: React.FC = (props) => {
- + {navigator !== undefined && /Mac/.test(navigator.userAgent) ? "⌃" : "strg"} + @@ -330,7 +330,7 @@ export const Editor: React.FC = (props) => { and - + or From ceb912390704a3ee2268bc724956b92b5ecf1a57 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 02:30:22 +0100 Subject: [PATCH 13/45] feat: enhance DFlowNode styling with border and shadow adjustments for improved appearance --- .../d-flow-node/DFlowNode.style.scss | 3 + .../d-flow-node/DFlowNodeDefaultCard.tsx | 2 +- .../d-flow-node/DFlowNodeTriggerCard.tsx | 87 +++++++++---------- 3 files changed, 44 insertions(+), 48 deletions(-) diff --git a/src/components/d-flow-node/DFlowNode.style.scss b/src/components/d-flow-node/DFlowNode.style.scss index 5f167719e..fd53ad26a 100644 --- a/src/components/d-flow-node/DFlowNode.style.scss +++ b/src/components/d-flow-node/DFlowNode.style.scss @@ -3,6 +3,9 @@ @use "../../styles/box"; .d-flow-node { + border: 1px solid helpers.borderColor(); + box-shadow: none; + &__handle { border: none !important; padding: 1px; diff --git a/src/components/d-flow-node/DFlowNodeDefaultCard.tsx b/src/components/d-flow-node/DFlowNodeDefaultCard.tsx index e79048383..a52778f14 100644 --- a/src/components/d-flow-node/DFlowNodeDefaultCard.tsx +++ b/src/components/d-flow-node/DFlowNodeDefaultCard.tsx @@ -131,7 +131,7 @@ export const DFlowNodeDefaultCard: React.FC = memo((p py={"0.35"} outline={firstItem.id === id} borderColor={activeTabId == node?.id ? "info" : undefined} - className={activeTabId == node?.id ? "d-flow-node--active" : undefined} + className={`d-flow-node ${activeTabId == node?.id ? "d-flow-node--active" : undefined}`} color={"primary"} onClick={() => { flowInstance.setViewport({ diff --git a/src/components/d-flow-node/DFlowNodeTriggerCard.tsx b/src/components/d-flow-node/DFlowNodeTriggerCard.tsx index 0270de9ce..be6182bbb 100644 --- a/src/components/d-flow-node/DFlowNodeTriggerCard.tsx +++ b/src/components/d-flow-node/DFlowNodeTriggerCard.tsx @@ -5,15 +5,14 @@ import {useService, useStore as usePictorStore} from "../../utils/contextStore"; import {FileTabsService} from "../file-tabs/FileTabs.service"; import {Card} from "../card/Card"; import {Flex} from "../flex/Flex"; -import {IconBolt, IconChevronDown} from "@tabler/icons-react"; -import {Button} from "../button/Button"; +import {IconBolt} from "@tabler/icons-react"; import {DFlowTabTrigger} from "../d-flow-file/DFlowTabTrigger"; import {DFlowTypeReactiveService} from "../d-flow-type"; import {Badge} from "../badge/Badge"; import {DFlowNodeProps} from "./DFlowNode"; import {DFlowReactiveService} from "../d-flow"; -// @ts-ignore + export type DFlowNodeTriggerCardProps = NodeProps> export const DFlowNodeTriggerCard: React.FC = memo((props) => { @@ -49,52 +48,46 @@ export const DFlowNodeTriggerCard: React.FC = memo((p }) }, [definition, data.instance, fileTabsService, flow]) - return - Starting node - { - flowInstance.setViewport({ - x: (viewportWidth / 2) + (props.positionAbsoluteX * -1) - (width / 2), - y: (viewportHeight / 2) + (props.positionAbsoluteY * -1) - (height / 2), - zoom: 1 - }, { - duration: 250, - }) - fileTabsService.activateTab(definition?.id!!) - }}> + return { + flowInstance.setViewport({ + x: (viewportWidth / 2) + (props.positionAbsoluteX * -1) - (width / 2), + y: (viewportHeight / 2) + (props.positionAbsoluteY * -1) - (height / 2), + zoom: 1 + }, { + duration: 250, + }) + fileTabsService.activateTab(definition?.id!!) + }}> + + + Starting node + - - - - - {definition?.names!![0]?.content ?? definition?.id} - - - - - - + + + + {definition?.displayMessages!![0]?.content ?? definition?.id} + + - {/* Ausgang */} - - - + + }) \ No newline at end of file From 55c65e6d403c2a8507aa200d66be2b5bbf99b31c Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 12:02:39 +0100 Subject: [PATCH 14/45] feat: update Tooltip styles to use tertiary color for improved visual consistency --- src/components/tooltip/Tooltip.style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/tooltip/Tooltip.style.scss b/src/components/tooltip/Tooltip.style.scss index 52751e27a..5cdc26603 100644 --- a/src/components/tooltip/Tooltip.style.scss +++ b/src/components/tooltip/Tooltip.style.scss @@ -10,7 +10,7 @@ padding: variables.$xxs variables.$xs; & { - @include box.box(variables.$secondary); + @include box.box(variables.$tertiary); @include helpers.fontStyle(); @include helpers.borderRadius(); box-shadow: none; @@ -18,7 +18,7 @@ } &__arrow { - fill: helpers.backgroundColor(variables.$secondary); + fill: helpers.backgroundColor(variables.$tertiary); } } \ No newline at end of file From bacf0edd3ae0fc0904f07d7b48d3a4b580db306e Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 12:26:48 +0100 Subject: [PATCH 15/45] feat: update Alert component icons to use consistent size and add tertiary color support --- src/components/alert/Alert.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx index ad3120ff3..797b3f89b 100644 --- a/src/components/alert/Alert.tsx +++ b/src/components/alert/Alert.tsx @@ -19,12 +19,13 @@ export const Alert: React.FC = (props) => { const {color = "secondary", children, ...rest} = props const icons: Record> = { - "primary": , - "secondary": , - "info": , - "success": , - "warning": , - "error": , + "primary": , + "secondary": , + "tertiary": , + "info": , + "success": , + "warning": , + "error": , } return
From 271a23f34841a28d32f18070c20c587ebdce893d Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 12:31:31 +0100 Subject: [PATCH 16/45] feat: update Toast component icons to use consistent size and add tertiary color support --- src/components/toast/Toast.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx index 9dd3a4612..8c5acf0cd 100644 --- a/src/components/toast/Toast.tsx +++ b/src/components/toast/Toast.tsx @@ -44,12 +44,12 @@ export function Toast(props: ToastProps) {
- {color && } + {color && } {title} {dismissible && sonnerToast.dismiss(props.id)}> - + } @@ -69,12 +69,13 @@ export function Toast(props: ToastProps) { const ToastIcon: React.FC<{color: Color}> = ({ color }) => { const icons: Record> = { - "primary": , - "secondary": , - "info": , - "success": , - "warning": , - "error": , + "primary": , + "secondary": , + "tertiary": , + "info": , + "success": , + "warning": , + "error": , } return icons[color] ?? null From 220eb24d5cc82fc51cf02b0ddbbab03d22cfb887 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 12:41:43 +0100 Subject: [PATCH 17/45] feat: update Toast component to improve styling and dismissible button functionality --- src/components/toast/Toast.stories.tsx | 2 +- src/components/toast/Toast.style.scss | 1 + src/components/toast/Toast.tsx | 11 ++++++----- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/toast/Toast.stories.tsx b/src/components/toast/Toast.stories.tsx index 443b3eb7c..037e91df2 100644 --- a/src/components/toast/Toast.stories.tsx +++ b/src/components/toast/Toast.stories.tsx @@ -18,7 +18,7 @@ export const ExampleToast = () => { const renderToast = () => { toast({ title: "Cannot delete the last administrative role", - color: "warning", + color: "info", dismissible: true, duration: 10000, children: Some content diff --git a/src/components/toast/Toast.style.scss b/src/components/toast/Toast.style.scss index 1a418e884..13edca15f 100644 --- a/src/components/toast/Toast.style.scss +++ b/src/components/toast/Toast.style.scss @@ -80,6 +80,7 @@ position: relative; margin: variables.$md (-1 * variables.$md) (-1 * variables.$md); padding: variables.$xxs variables.$md (variables.$xxs + 0.25rem); + gap: variables.$xxs; & { border-top: 1px solid helpers.borderColor(); diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx index 8c5acf0cd..38845144c 100644 --- a/src/components/toast/Toast.tsx +++ b/src/components/toast/Toast.tsx @@ -14,6 +14,7 @@ import { } from "@tabler/icons-react" import {Text} from "../text/Text" import {Flex} from "../flex/Flex"; +import {Button} from "../button/Button"; export interface ToastProps extends Omit, "title" | "id"> { children?: React.ReactNode | React.ReactNode[] @@ -48,9 +49,9 @@ export function Toast(props: ToastProps) { {title} {dismissible && - sonnerToast.dismiss(props.id)}> + } {children && @@ -58,11 +59,11 @@ export function Toast(props: ToastProps) { {children}
} -
- This message will close in {duration / 1000} seconds -
+ This message will close in {duration / 1000} seconds +
) } From 7241d2d3bf1e0ed2e1328e75245a0c41fd7e301a Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:18:52 +0100 Subject: [PATCH 18/45] feat: update secondary color variable for improved consistency --- src/styles/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 2eb3f076f..dea5512cc 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,6 +1,6 @@ //colors $primary: #070514; -$secondary: #bfbfbf; +$secondary: #a6a6a6; $tertiary: #ffffff; $info: #70ffb2; $success: #29BF12; From 0a36ec5f0dbd0d7009bc2df7f7398fba671a8213 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:23:25 +0100 Subject: [PATCH 19/45] feat: add nowrap text wrapping to DFlowNode for improved layout --- src/components/d-flow-node/DFlowNode.style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/d-flow-node/DFlowNode.style.scss b/src/components/d-flow-node/DFlowNode.style.scss index fd53ad26a..d7eecf019 100644 --- a/src/components/d-flow-node/DFlowNode.style.scss +++ b/src/components/d-flow-node/DFlowNode.style.scss @@ -5,6 +5,7 @@ .d-flow-node { border: 1px solid helpers.borderColor(); box-shadow: none; + text-wrap: nowrap; &__handle { border: none !important; From 61b67d570bb690eae513434cb6992c1fbb022642 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:23:36 +0100 Subject: [PATCH 20/45] feat: update DFlowNodeTriggerCard className for improved styling --- src/components/d-flow-node/DFlowNodeTriggerCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/d-flow-node/DFlowNodeTriggerCard.tsx b/src/components/d-flow-node/DFlowNodeTriggerCard.tsx index be6182bbb..9851ae2eb 100644 --- a/src/components/d-flow-node/DFlowNodeTriggerCard.tsx +++ b/src/components/d-flow-node/DFlowNodeTriggerCard.tsx @@ -53,7 +53,7 @@ export const DFlowNodeTriggerCard: React.FC = memo((p paddingSize={"xs"} key={id} data-flow-refernce={id} - className={fileTabsService.getActiveTab()?.id == definition?.id ? "d-flow-node--active" : undefined} + className={`d-flow-node ${fileTabsService.getActiveTab()?.id == definition?.id ? "d-flow-node--active" : undefined}`} onClick={() => { flowInstance.setViewport({ x: (viewportWidth / 2) + (props.positionAbsoluteX * -1) - (width / 2), From 95fbc9a7eb7133d2736429748b2110e87e63c2eb Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:25:37 +0100 Subject: [PATCH 21/45] feat: add nowrap text wrapping to ButtonGroup in DFlowPanelControl for improved layout --- src/components/d-flow-panel/DFlowPanelControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/d-flow-panel/DFlowPanelControl.tsx b/src/components/d-flow-panel/DFlowPanelControl.tsx index b51cf9423..91ad3a7f1 100644 --- a/src/components/d-flow-panel/DFlowPanelControl.tsx +++ b/src/components/d-flow-panel/DFlowPanelControl.tsx @@ -63,7 +63,7 @@ export const DFlowPanelControl: React.FC = (props) => { }, [flowId, flowService, flowStore, activeTab]) return - + - - - ) } \ No newline at end of file From abc598810cf10bd9e30c6bfb64281a69d860dc55 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:45:13 +0100 Subject: [PATCH 23/45] feat: remove unused imports from DFlowPanelControl for cleaner code --- src/components/d-flow-panel/DFlowPanelControl.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/d-flow-panel/DFlowPanelControl.tsx b/src/components/d-flow-panel/DFlowPanelControl.tsx index 91ad3a7f1..78647c38e 100644 --- a/src/components/d-flow-panel/DFlowPanelControl.tsx +++ b/src/components/d-flow-panel/DFlowPanelControl.tsx @@ -1,7 +1,6 @@ import React from "react"; import {ButtonGroup} from "../button-group/ButtonGroup"; import {Button} from "../button/Button"; -import {IconPlus, IconTrash} from "@tabler/icons-react"; import {Panel} from "@xyflow/react"; import {useService, useStore} from "../../utils"; import {FileTabsService} from "../file-tabs/FileTabs.service"; From f4e5a1cf20943ebd0a9a23447630d45f11e76fb7 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:46:37 +0100 Subject: [PATCH 24/45] feat: update Text component in DFlowInputDataType for improved hierarchy --- src/components/d-flow-input/DFlowInputDataType.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/d-flow-input/DFlowInputDataType.tsx b/src/components/d-flow-input/DFlowInputDataType.tsx index d6dc57c30..100684514 100644 --- a/src/components/d-flow-input/DFlowInputDataType.tsx +++ b/src/components/d-flow-input/DFlowInputDataType.tsx @@ -55,7 +55,7 @@ export const DFlowInputDataType: React.FC = (props) => - + {(initialDataType?.name?.[0].content) ?? "Unnamed Data Type"} From 137fbf97057e5cd825cb1fe443f5e91a00a148b6 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 13:50:36 +0100 Subject: [PATCH 25/45] feat: add boxShadow style to ButtonGroup in DFlowTabs for improved appearance --- src/components/d-flow-file/DFlowTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/d-flow-file/DFlowTabs.tsx b/src/components/d-flow-file/DFlowTabs.tsx index 15b83b968..08d3d6387 100644 --- a/src/components/d-flow-file/DFlowTabs.tsx +++ b/src/components/d-flow-file/DFlowTabs.tsx @@ -80,7 +80,7 @@ export const DFlowTabs: React.FC = (props) => { > + + + + + }> setIsFolderCollapsed(panelSize.asPercentage <= 0)} id={"1"} defaultSize={"20%"} collapsedSize={"0%"} collapsible minSize={"10%"}> @@ -275,21 +288,9 @@ export const Dashboard = () => { - - - - - }> + }} > Date: Thu, 5 Feb 2026 16:00:43 +0100 Subject: [PATCH 31/45] feat: adjust padding in DResizable story for improved layout consistency --- src/components/d-resizable/DResizable.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index f4b614243..160049c19 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -267,7 +267,7 @@ export const Dashboard = () => { + - +
+
+ + +
+ + + + + CodeZero Orga + projects + Discord Bot + flow + #1 + + + + } right={⌘K} + rightType={"icon"} + placeholder={"Search..."}/> +
@@ -267,39 +286,59 @@ export const Dashboard = () => { + + + } leftContent={ + + + + + + + + Flow builder + + + }> - setIsFolderCollapsed(panelSize.asPercentage <= 0)} id={"1"} defaultSize={"20%"} collapsedSize={"0%"} collapsible minSize={"10%"}> + - + - + - + {show && ( <> - + @@ -322,61 +361,69 @@ const Folder = () => { const ref = React.useRef(null) return - - - - - - - Add new flow - - - - - - - - - - - - Open active flow - - - - - - - - - - - Close all - - - - + + + Explorer + + + - - Open all + Add new flow - + + + + + + + + Open active flow + + + + + + + + + + + Close all + + + + + + + + + + + Open all + + + + + + }> console.log(contextData)} diff --git a/src/components/d-resizable/DResizable.style.scss b/src/components/d-resizable/DResizable.style.scss index 785aef8ee..b9b7fc618 100644 --- a/src/components/d-resizable/DResizable.style.scss +++ b/src/components/d-resizable/DResizable.style.scss @@ -8,6 +8,7 @@ &__panel { color: white; position: relative; + background: transparent; overflow: hidden; z-index: 0; @@ -15,10 +16,6 @@ border: none; } - &:has(.d-resizable__panel) { - background: variables.$primary; - } - } &__handle { @@ -26,16 +23,16 @@ display: flex; align-items: center; justify-content: center; - background: helpers.backgroundColor(variables.$tertiary); + background: transparent; outline: none; &[aria-orientation=vertical] { - width: 1px; + width: variables.$xs; height: 100%; } &[aria-orientation=horizontal] { - height: 1px; + height: variables.$xs; width: 100%; } diff --git a/src/components/d-resizable/DResizable.tsx b/src/components/d-resizable/DResizable.tsx index d5c356681..73505aa93 100644 --- a/src/components/d-resizable/DResizable.tsx +++ b/src/components/d-resizable/DResizable.tsx @@ -19,7 +19,7 @@ export const DResizablePanelGroup: React.FC = (props) } export const DResizablePanel: React.FC = (props) => { - return + return } export const DResizableHandle: React.FC = (props) => { diff --git a/src/components/tab/Tab.style.scss b/src/components/tab/Tab.style.scss index 65455b2d1..8cda5b338 100644 --- a/src/components/tab/Tab.style.scss +++ b/src/components/tab/Tab.style.scss @@ -25,7 +25,6 @@ } &__trigger { - background: transparent; border: none; margin: 0; position: relative; @@ -50,10 +49,25 @@ } } + &[data-orientation="vertical"] { + &:after { + content: ""; + position: absolute; + background: transparent; + + border-bottom-right-radius: 50rem; + border-top-right-radius: 50rem; + width: 2px; + height: 35%; + top: 50%; + left: -0.7rem; + transform: translateY(-50%); + } + } + &[aria-selected=true] { &[data-orientation="vertical"], &[data-orientation="horizontal"] { opacity: 1; - &:after { background: variables.$info; } From 491360c2b5589dc4a8fa51f094f7af879a0aabdd Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 23:40:50 +0100 Subject: [PATCH 33/45] feat: update DFullScreen and DResizable components for improved layout and styling --- .../d-fullscreen/DFullScreen.style.scss | 1 + .../d-resizable/DResizable.stories.tsx | 160 +++++++++--------- .../d-resizable/DResizable.style.scss | 4 +- 3 files changed, 79 insertions(+), 86 deletions(-) diff --git a/src/components/d-fullscreen/DFullScreen.style.scss b/src/components/d-fullscreen/DFullScreen.style.scss index f43e56400..b6ff5327e 100644 --- a/src/components/d-fullscreen/DFullScreen.style.scss +++ b/src/components/d-fullscreen/DFullScreen.style.scss @@ -6,6 +6,7 @@ --primary: #{helpers.backgroundColor(variables.$primary)}; --secondary: #{helpers.backgroundColor(variables.$secondary)}; + --tertiary: #{helpers.backgroundColor(variables.$tertiary)}; position: relative; overflow: hidden; diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index 668655309..8fb5023d5 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -3,7 +3,7 @@ import {DResizableHandle, DResizablePanel, DResizablePanelGroup} from "./DResiza import React from "react"; import {DFullScreen} from "../d-fullscreen/DFullScreen"; import { - IconAdjustmentsCog, + IconAdjustmentsCog, IconAi, IconArrowsMaximize, IconArrowsMinimize, IconCircleDot, @@ -46,6 +46,7 @@ import {Breadcrumb} from "../breadcrumb/Breadcrumb"; import {TextInput} from "../form"; import {Badge} from "../badge/Badge"; import {AuroraBackground} from "../aurora/Aurora"; +import {Avatar} from "../avatar/Avatar"; const meta: Meta = { title: "Dashboard Resizable", @@ -233,86 +234,81 @@ export const Dashboard = () => { const [show, setShow] = React.useState(false); return - -
-
-
- + +
+
+ -
- - - - - CodeZero Orga - projects - Discord Bot - flow - #1 - - - - } right={⌘K} - rightType={"icon"} - placeholder={"Search..."}/> - - - -
- - }> +
+ + + + + + + + Flow builder + + + + + }> - +
+ + + CodeZero Orga + projects + Discord Bot + flow + #1 + + + + + + + +
+ + } rightContent={ - } leftContent={ - - - - - - - - Flow builder - - - - - - }> { - + - + {show && ( <> - + @@ -363,7 +355,7 @@ const Folder = () => { return - Explorer + Explorer diff --git a/src/components/d-resizable/DResizable.style.scss b/src/components/d-resizable/DResizable.style.scss index b9b7fc618..ba677f2a7 100644 --- a/src/components/d-resizable/DResizable.style.scss +++ b/src/components/d-resizable/DResizable.style.scss @@ -27,12 +27,12 @@ outline: none; &[aria-orientation=vertical] { - width: variables.$xs; + width: 1px; height: 100%; } &[aria-orientation=horizontal] { - height: variables.$xs; + height: 1px; width: 100%; } From ff7dc141fdd0697dc3729d2eaa0e3edbbcb8c2ed Mon Sep 17 00:00:00 2001 From: nicosammito Date: Thu, 5 Feb 2026 23:50:45 +0100 Subject: [PATCH 34/45] feat: refine DResizable component layout and styling for improved usability --- .../d-resizable/DResizable.stories.tsx | 19 ++++++++++++------- .../d-resizable/DResizable.style.scss | 4 ++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index 8fb5023d5..adad646f3 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -316,21 +316,26 @@ export const Dashboard = () => { - + - + {show && ( <> - + diff --git a/src/components/d-resizable/DResizable.style.scss b/src/components/d-resizable/DResizable.style.scss index ba677f2a7..b9b7fc618 100644 --- a/src/components/d-resizable/DResizable.style.scss +++ b/src/components/d-resizable/DResizable.style.scss @@ -27,12 +27,12 @@ outline: none; &[aria-orientation=vertical] { - width: 1px; + width: variables.$xs; height: 100%; } &[aria-orientation=horizontal] { - height: 1px; + height: variables.$xs; width: 100%; } From 0f265f2f84c587263ece620372c3cc436f613845 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:40:37 +0100 Subject: [PATCH 35/45] feat: update Avatar component styling and color generation for improved visual consistency --- src/components/avatar/Avatar.style.scss | 2 ++ src/components/avatar/Avatar.tsx | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/avatar/Avatar.style.scss b/src/components/avatar/Avatar.style.scss index 9d5aa02ef..547c4258e 100644 --- a/src/components/avatar/Avatar.style.scss +++ b/src/components/avatar/Avatar.style.scss @@ -14,6 +14,8 @@ & { @include box.box(); @include helpers.borderRadius(); + background: transparent; + box-shadow: none; } &--image { diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx index c9cda3dd9..7c8aaa1a2 100644 --- a/src/components/avatar/Avatar.tsx +++ b/src/components/avatar/Avatar.tsx @@ -3,6 +3,7 @@ import {Code0Component} from "../../utils/types"; import {md5} from 'js-md5'; import "./Avatar.style.scss" import {mergeCode0Props} from "../../utils/utils"; +import {hashToColor} from "../d-flow/DFlow.util"; interface AvatarImageProps { src: string @@ -34,7 +35,7 @@ const AvatarIdenticon: React.FC = ({identifier, size}) => const updateCanvas = () => { const hash = md5(identifier) const block = Math.floor(size / 5) - const hashColor = hash.slice(0, 6) + const hashColor = hashToColor(identifier) canvas.current!!.width = block * 5 canvas.current!!.height = block * 5 @@ -61,7 +62,7 @@ const AvatarIdenticon: React.FC = ({identifier, size}) => map.forEach((row, i) => { row.forEach((el, j) => { if (el) { - ctx!!.fillStyle = '#' + hashColor; + ctx!!.fillStyle = hashColor; ctx!!.fillRect( block * i, block * j, From ef1ef045468372f4a2171087c931a3d50436eb51 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:40:46 +0100 Subject: [PATCH 36/45] feat: remove padding from DFlowFolder root for improved layout consistency --- src/components/d-flow-folder/DFlowFolder.style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/d-flow-folder/DFlowFolder.style.scss b/src/components/d-flow-folder/DFlowFolder.style.scss index b4fbd600d..0b6f07d6a 100644 --- a/src/components/d-flow-folder/DFlowFolder.style.scss +++ b/src/components/d-flow-folder/DFlowFolder.style.scss @@ -21,7 +21,6 @@ user-select: none; &__root { - padding: 0.7rem; width: 100%; height: 100%; box-sizing: border-box; From 65b4b209b1844924e814cddc888c197b5c157780 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:40:52 +0100 Subject: [PATCH 37/45] feat: update DFlowInputDataTypeEditDialog layout and styling for improved usability --- .../d-flow-input/DFlowInputDataTypeEditDialog.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx b/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx index 63c7ce9c1..4f39343fe 100644 --- a/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx +++ b/src/components/d-flow-input/DFlowInputDataTypeEditDialog.tsx @@ -127,8 +127,8 @@ export const DFlowInputDataTypeEditDialog: React.FC }> - - + + @@ -144,7 +144,7 @@ export const DFlowInputDataTypeEditDialog: React.FC - + { const dataTypeIdentifier = dataTypeService.getTypeFromValue({ __typename: "LiteralValue", From 670dda634be52cd460c4402423f5c112f76c543a Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:40:59 +0100 Subject: [PATCH 38/45] feat: update tooltip positioning in DFlowPanelControl for improved visibility --- src/components/d-flow-panel/DFlowPanelControl.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/d-flow-panel/DFlowPanelControl.tsx b/src/components/d-flow-panel/DFlowPanelControl.tsx index 78647c38e..de5858d79 100644 --- a/src/components/d-flow-panel/DFlowPanelControl.tsx +++ b/src/components/d-flow-panel/DFlowPanelControl.tsx @@ -74,9 +74,8 @@ export const DFlowPanelControl: React.FC = (props) => { - + Select a node to delete it - From efcb8bd09be95863f1dfb27814098ed01e50d60c Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:41:08 +0100 Subject: [PATCH 39/45] feat: update tooltip content positioning in DFlowPanelLayout for improved visibility --- src/components/d-flow-panel/DFlowPanelLayout.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/d-flow-panel/DFlowPanelLayout.tsx b/src/components/d-flow-panel/DFlowPanelLayout.tsx index 789bb36b4..68380c1c5 100644 --- a/src/components/d-flow-panel/DFlowPanelLayout.tsx +++ b/src/components/d-flow-panel/DFlowPanelLayout.tsx @@ -22,8 +22,7 @@ export const DFlowPanelLayout: React.FC = (props) => { - - + Vertical layout @@ -35,8 +34,7 @@ export const DFlowPanelLayout: React.FC = (props) => { - - + Horizontal layout @@ -48,8 +46,7 @@ export const DFlowPanelLayout: React.FC = (props) => { - - + Manual layout From 06f7d3a578c565152e629880ee1e007d6cae516c Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:41:16 +0100 Subject: [PATCH 40/45] feat: enhance tooltip content positioning and styling for improved usability --- .../d-resizable/DResizable.stories.tsx | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/d-resizable/DResizable.stories.tsx b/src/components/d-resizable/DResizable.stories.tsx index adad646f3..e0c8b5b68 100644 --- a/src/components/d-resizable/DResizable.stories.tsx +++ b/src/components/d-resizable/DResizable.stories.tsx @@ -266,14 +266,23 @@ export const Dashboard = () => { - + Flow builder - + + + + + + + Project Settings + + + }> @@ -373,9 +382,8 @@ const Folder = () => { - + Add new flow - @@ -387,9 +395,8 @@ const Folder = () => { - + Open active flow - @@ -400,9 +407,8 @@ const Folder = () => { - + Close all - @@ -413,9 +419,8 @@ const Folder = () => { - + Open all - From b4b1c46748b8c34a06b376faae40407ae4ef6257 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 12:41:24 +0100 Subject: [PATCH 41/45] feat: enhance tooltip component with color customization for improved styling --- src/components/tooltip/Tooltip.style.scss | 13 ++++++++++++- src/components/tooltip/Tooltip.tsx | 12 ++++++------ 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/tooltip/Tooltip.style.scss b/src/components/tooltip/Tooltip.style.scss index 5cdc26603..baa94711d 100644 --- a/src/components/tooltip/Tooltip.style.scss +++ b/src/components/tooltip/Tooltip.style.scss @@ -13,7 +13,6 @@ @include box.box(variables.$tertiary); @include helpers.fontStyle(); @include helpers.borderRadius(); - box-shadow: none; } } @@ -21,4 +20,16 @@ fill: helpers.backgroundColor(variables.$tertiary); } +} + +@each $name, $color in variables.$colors { + + .tooltip__content--#{$name} { + & { + @include box.box($color); + } + } + .tooltip__arrow--#{$name} { + fill: helpers.backgroundColor($color); + } } \ No newline at end of file diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx index 9868e69ad..17ec0e3a9 100644 --- a/src/components/tooltip/Tooltip.tsx +++ b/src/components/tooltip/Tooltip.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {Code0ComponentProps} from "../../utils/types"; +import {Code0ComponentProps, Color} from "../../utils/types"; import * as RadixTooltip from "@radix-ui/react-tooltip"; import {mergeCode0Props} from "../../utils/utils"; import "./Tooltip.style.scss" @@ -7,12 +7,12 @@ import "./Tooltip.style.scss" export type TooltipProps = Code0ComponentProps & RadixTooltip.TooltipProps export type TooltipTriggerProps = Code0ComponentProps & RadixTooltip.TooltipTriggerProps export type TooltipPortalProps = Code0ComponentProps & RadixTooltip.TooltipPortalProps -export type TooltipContentProps = Code0ComponentProps & RadixTooltip.TooltipContentProps -export type TooltipArrowProps = Code0ComponentProps & RadixTooltip.TooltipArrowProps +export type TooltipContentProps = Code0ComponentProps & RadixTooltip.TooltipContentProps & {color?: Color} +export type TooltipArrowProps = Code0ComponentProps & RadixTooltip.TooltipArrowProps & {color?: Color} export const Tooltip: React.FC = (props) => { return - + } @@ -26,9 +26,9 @@ export const TooltipPortal: React.FC = (props) => { export const TooltipContent: React.FC = (props) => { return + align={props.align} {...mergeCode0Props(`tooltip__content tooltip__content--${props.color ?? "tertiary"}`, props) as TooltipContentProps}/> } export const TooltipArrow: React.FC = (props) => { - return + return } \ No newline at end of file From b548fede0ea59b08df10749e054b63cd970b8a92 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 17:29:28 +0100 Subject: [PATCH 42/45] feat: update styling for alert, button, and input components to enhance visual consistency --- src/components/alert/Alert.style.scss | 1 + src/components/button/Button.style.scss | 2 ++ src/components/form/Input.style.scss | 42 +++++++++++++++---------- 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/components/alert/Alert.style.scss b/src/components/alert/Alert.style.scss index a2331d04b..263d2787a 100644 --- a/src/components/alert/Alert.style.scss +++ b/src/components/alert/Alert.style.scss @@ -24,5 +24,6 @@ @each $name, $color in variables.$colors { .alert--#{$name} { @include box.box($color); + box-shadow: none; } } \ No newline at end of file diff --git a/src/components/button/Button.style.scss b/src/components/button/Button.style.scss index b767b19ee..0eb7acded 100644 --- a/src/components/button/Button.style.scss +++ b/src/components/button/Button.style.scss @@ -49,10 +49,12 @@ &:hover { background: helpers.backgroundColor($color, 1.5); + box-shadow: inset 0 1px 1px helpers.borderColor($color); } &:active, &:focus, &[aria-selected=true], &[data-state=open] { background: helpers.backgroundColor($color, 2); + box-shadow: inset 0 1px 1px helpers.borderColor($color); } } diff --git a/src/components/form/Input.style.scss b/src/components/form/Input.style.scss index 082852bbc..93310852b 100644 --- a/src/components/form/Input.style.scss +++ b/src/components/form/Input.style.scss @@ -40,13 +40,16 @@ padding-right: 0; } - &--action { padding: 0; } + &--action { + padding: 0; + } &--placeholder { @include box.box(variables.$primary); @include helpers.fontStyle(); border-radius: variables.$borderRadius - ($padding / 4); padding: $padding; + box-shadow: none; } } @@ -100,7 +103,9 @@ font-size: variables.$xs; display: block; - & { @include helpers.fontStyle(); } + & { + @include helpers.fontStyle(); + } } &__description { @@ -109,7 +114,9 @@ margin: calc($padding / 2) 0 $padding; display: block; - & { @include helpers.fontStyle(); } + & { + @include helpers.fontStyle(); + } } &__message { @@ -125,6 +132,7 @@ @include box.box(variables.$error, variables.$white, variables.$error); @include helpers.borderRadius(); @include helpers.fontStyle(); + box-shadow: none; } > svg { @@ -161,11 +169,12 @@ } } -.radio-group { } +.radio-group { +} .radio-input { background: transparent !important; - border: none !important; + box-shadow: none !important; display: flex; align-items: center; box-sizing: border-box; @@ -181,7 +190,7 @@ & { @include helpers.fontStyle(); @include box.boxActive(); - @include box.box(); + @include box.box(variables.$tertiary); @include helpers.disabled(); @include helpers.borderRadius(); } @@ -200,7 +209,9 @@ &[data-state="checked"] { background-color: variables.$info; - & { @include helpers.borderRadius(); } + & { + @include helpers.borderRadius(); + } } } } @@ -216,11 +227,10 @@ $size: 0.9rem; background: transparent !important; - border: none !important; + box-shadow: none !important; align-items: center; box-sizing: border-box; gap: variables.$xxs; - padding: $padding 0; &__button { aspect-ratio: 1/1; @@ -238,10 +248,6 @@ @include box.box(); @include helpers.disabled(); } - - &[data-state="checked"] { - @include box.boxActiveStyle(variables.$info); - } } &__indicator { @@ -250,6 +256,7 @@ align-items: center; justify-content: center; top: 1px; + color: variables.$info; } } @@ -258,17 +265,18 @@ $padding: variables.$xxs; $size: 0.9rem; + box-shadow: none !important; background: transparent !important; - border: none !important; + width: fit-content; .input__control { position: relative; box-sizing: border-box; padding: 0; - width: $size; - height: $size; - + margin: 0; + height: 16px; + width: 0; appearance: none; outline: none; cursor: pointer; From 7cf84359348a8a946e469ea31ee750da6c1ef528 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 17:30:09 +0100 Subject: [PATCH 43/45] feat: update input component styling to use tertiary color for improved visual consistency --- src/components/form/Input.style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/Input.style.scss b/src/components/form/Input.style.scss index 93310852b..2d82e7268 100644 --- a/src/components/form/Input.style.scss +++ b/src/components/form/Input.style.scss @@ -245,7 +245,7 @@ & { @include helpers.fontStyle(); @include box.boxActive(); - @include box.box(); + @include box.box(variables.$tertiary); @include helpers.disabled(); } } From 6e2bca5f6a765d7d3fc1ea0b35b641af7cd47dd4 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 17:51:10 +0100 Subject: [PATCH 44/45] feat: update input component styling to use tertiary color for improved visual consistency --- src/components/form/Input.style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/Input.style.scss b/src/components/form/Input.style.scss index 2d82e7268..e8ca5f124 100644 --- a/src/components/form/Input.style.scss +++ b/src/components/form/Input.style.scss @@ -325,7 +325,7 @@ left: calc(-1 * $padding / 2); & { - @include box.box(); + @include box.box(variables.$tertiary); @include helpers.borderRadius(); position: absolute; width: $size * 2.5 + $padding; From ad37fb529e5c5f06fddd76f6c62b21da10616274 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Sat, 7 Feb 2026 17:55:01 +0100 Subject: [PATCH 45/45] feat: add new dependencies for CodeMirror integration and syntax highlighting --- package-lock.json | 78 ++++++++++++++++++++++++++++++++++++++++++----- package.json | 18 ++++++----- 2 files changed, 81 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7b9943edb..7ecbb1dff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,21 +7,16 @@ "": { "name": "@code0-tech/pictor", "version": "0.0.0", - "dependencies": { - "@codemirror/autocomplete": "^6.20.0", - "@codemirror/lang-json": "^6.0.2", - "@monaco-editor/react": "^4.7.0", - "@uiw/codemirror-themes": "^4.25.4", - "@uiw/react-codemirror": "^4.25.4", - "react-syntax-highlighter": "^16.1.0" - }, "devDependencies": { "@ariakit/react": "^0.4.17", "@babel/plugin-proposal-decorators": "^7.28.6", "@babel/plugin-transform-class-properties": "^7.28.6", "@code0-tech/sagittarius-graphql-types": "^0.0.0-e610ffe24a7dc3cf7b4c285994830412410f229e", + "@codemirror/autocomplete": "^6.20.0", + "@codemirror/lang-json": "^6.0.2", "@dagrejs/dagre": "^2.0.3", "@mdx-js/react": "^3.1.1", + "@monaco-editor/react": "^4.7.0", "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-context-menu": "^2.2.16", "@radix-ui/react-dialog": "^1.1.15", @@ -50,6 +45,8 @@ "@types/react": "^19.2.8", "@types/react-dom": "^19.2.3", "@types/react-syntax-highlighter": "^15.5.13", + "@uiw/codemirror-themes": "^4.25.4", + "@uiw/react-codemirror": "^4.25.4", "@vitejs/plugin-react": "^5.1.2", "@vitest/browser-playwright": "^4.0.17", "@vitest/coverage-v8": "^4.0.17", @@ -71,6 +68,7 @@ "react-contenteditable": "^3.3.7", "react-dom": "^19.2.3", "react-resizable-panels": "^4.4.0", + "react-syntax-highlighter": "^16.1.0", "react-zoom-pan-pinch": "^3.7.0", "rimraf": "^6.1.2", "sass": "^1.97.2", @@ -89,6 +87,9 @@ "peerDependencies": { "@ariakit/react": "^0.4.17", "@code0-tech/sagittarius-graphql-types": "0.0.0-e610ffe24a7dc3cf7b4c285994830412410f229e", + "@codemirror/autocomplete": "^6.20.0", + "@codemirror/lang-json": "^6.0.2", + "@monaco-editor/react": "^4.7.0", "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-context-menu": "^2.2.16", "@radix-ui/react-dialog": "^1.1.15", @@ -101,6 +102,8 @@ "@radix-ui/react-toggle-group": "^1.1.11", "@radix-ui/react-tooltip": "^1.2.8", "@tabler/icons-react": "3.36.1", + "@uiw/codemirror-themes": "^4.25.4", + "@uiw/react-codemirror": "^4.25.4", "@xyflow/react": "^12.10.0", "cmdk": "^1.1.1", "js-md5": "^0.8.3", @@ -110,6 +113,7 @@ "react-contenteditable": "^3.3.7", "react-dom": "^18.0.0 || ^19.0.0", "react-resizable-panels": "^4.3.1", + "react-syntax-highlighter": "^16.1.0", "react-zoom-pan-pinch": "^3.7.0", "sonner": "^2.0.7" } @@ -1172,6 +1176,7 @@ "version": "7.28.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -1242,6 +1247,7 @@ "version": "6.20.0", "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz", "integrity": "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", @@ -1254,6 +1260,7 @@ "version": "6.10.1", "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.1.tgz", "integrity": "sha512-uWDWFypNdQmz2y1LaNJzK7fL7TYKLeUAU0npEC685OKTF3KcQ2Vu3klIM78D7I6wGhktme0lh3CuQLv0ZCrD9Q==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", @@ -1266,6 +1273,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz", "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", @@ -1276,6 +1284,7 @@ "version": "6.12.1", "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz", "integrity": "sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", @@ -1290,6 +1299,7 @@ "version": "6.9.3", "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.3.tgz", "integrity": "sha512-y3YkYhdnhjDBAe0VIA0c4wVoFOvnp8CnAvfLqi0TqotIv92wIlAAP7HELOpLBsKwjAX6W92rSflA6an/2zBvXw==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", @@ -1301,6 +1311,7 @@ "version": "6.6.0", "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz", "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", @@ -1312,6 +1323,7 @@ "version": "6.5.4", "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz", "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==", + "dev": true, "license": "MIT", "dependencies": { "@marijn/find-cluster-break": "^1.0.0" @@ -1321,6 +1333,7 @@ "version": "6.1.3", "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz", "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", @@ -1333,6 +1346,7 @@ "version": "6.39.12", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.12.tgz", "integrity": "sha512-f+/VsHVn/kOA9lltk/GFzuYwVVAKmOnNjxbrhkk3tPHntFqjWeI2TbIXx006YkBkqC10wZ4NsnWXCQiFPeAISQ==", + "dev": true, "license": "MIT", "peer": true, "dependencies": { @@ -3686,12 +3700,14 @@ "version": "1.5.1", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz", "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==", + "dev": true, "license": "MIT" }, "node_modules/@lezer/highlight": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz", "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==", + "dev": true, "license": "MIT", "dependencies": { "@lezer/common": "^1.3.0" @@ -3701,6 +3717,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz", "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==", + "dev": true, "license": "MIT", "dependencies": { "@lezer/common": "^1.2.0", @@ -3712,6 +3729,7 @@ "version": "1.4.8", "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz", "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==", + "dev": true, "license": "MIT", "dependencies": { "@lezer/common": "^1.0.0" @@ -3721,6 +3739,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz", "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==", + "dev": true, "license": "MIT" }, "node_modules/@mdx-js/react": { @@ -3879,6 +3898,7 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz", "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==", + "dev": true, "license": "MIT", "dependencies": { "state-local": "^1.0.6" @@ -3888,6 +3908,7 @@ "version": "4.7.0", "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz", "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==", + "dev": true, "license": "MIT", "dependencies": { "@monaco-editor/loader": "^1.5.0" @@ -6420,6 +6441,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dev": true, "license": "MIT", "dependencies": { "@types/unist": "*" @@ -6563,6 +6585,7 @@ "version": "1.26.5", "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz", "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==", + "dev": true, "license": "MIT" }, "node_modules/@types/react": { @@ -6622,6 +6645,7 @@ "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "dev": true, "license": "MIT", "optional": true }, @@ -6629,6 +6653,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "dev": true, "license": "MIT" }, "node_modules/@types/yargs": { @@ -6652,6 +6677,7 @@ "version": "4.25.4", "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.4.tgz", "integrity": "sha512-YzNwkm0AbPv1EXhCHYR5v0nqfemG2jEB0Z3Att4rBYqKrlG7AA9Rhjc3IyBaOzsBu18wtrp9/+uhTyu7TXSRng==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.0.0", @@ -6679,6 +6705,7 @@ "version": "4.25.4", "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.25.4.tgz", "integrity": "sha512-2SLktItgcZC4p0+PfFusEbAHwbuAWe3bOOntCevVgHtrWGtGZX3IPv2k8IKZMgOXtAHyGKpJvT9/nspPn/uCQg==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", @@ -6698,6 +6725,7 @@ "version": "4.25.4", "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.25.4.tgz", "integrity": "sha512-ipO067oyfUw+DVaXhQCxkB0ZD9b7RnY+ByrprSYSKCHaULvJ3sqWYC/Zen6zVQ8/XC4o5EPBfatGiX20kC7XGA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.6", @@ -8227,6 +8255,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -8237,6 +8266,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -8247,6 +8277,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -8440,6 +8471,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz", "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==", + "dev": true, "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.0.0", @@ -8482,6 +8514,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -8723,6 +8756,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==", + "dev": true, "license": "MIT" }, "node_modules/cross-spawn": { @@ -9059,6 +9093,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz", "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==", + "dev": true, "license": "MIT", "dependencies": { "character-entities": "^2.0.0" @@ -9300,6 +9335,7 @@ "version": "3.2.7", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", + "dev": true, "license": "(MPL-2.0 OR Apache-2.0)", "optionalDependencies": { "@types/trusted-types": "^2.0.7" @@ -9715,6 +9751,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", + "dev": true, "license": "MIT", "dependencies": { "format": "^0.2.0" @@ -9947,6 +9984,7 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==", + "dev": true, "engines": { "node": ">=0.4.x" } @@ -10295,6 +10333,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz", "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==", + "dev": true, "license": "MIT", "dependencies": { "@types/hast": "^3.0.0" @@ -10308,6 +10347,7 @@ "version": "9.0.1", "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz", "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==", + "dev": true, "license": "MIT", "dependencies": { "@types/hast": "^3.0.0", @@ -10335,6 +10375,7 @@ "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": "*" @@ -10344,6 +10385,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz", "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==", + "dev": true, "license": "CC0-1.0" }, "node_modules/html-escaper": { @@ -10549,6 +10591,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -10559,6 +10602,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "dev": true, "license": "MIT", "dependencies": { "is-alphabetical": "^2.0.0", @@ -10694,6 +10738,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -10765,6 +10810,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -13468,6 +13514,7 @@ "version": "1.20.0", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", + "dev": true, "license": "MIT", "dependencies": { "fault": "^1.0.0", @@ -13570,6 +13617,7 @@ "version": "14.0.0", "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", + "dev": true, "license": "MIT", "bin": { "marked": "bin/marked.js" @@ -13744,6 +13792,7 @@ "version": "0.55.1", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", + "dev": true, "license": "MIT", "peer": true, "dependencies": { @@ -14125,6 +14174,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz", "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==", + "dev": true, "license": "MIT", "dependencies": { "@types/unist": "^2.0.0", @@ -14144,6 +14194,7 @@ "version": "2.0.11", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==", + "dev": true, "license": "MIT" }, "node_modules/parse-json": { @@ -14649,6 +14700,7 @@ "version": "1.30.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -14691,6 +14743,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz", "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -14738,6 +14791,7 @@ "version": "19.2.3", "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", + "dev": true, "license": "MIT", "peer": true, "engines": { @@ -14794,6 +14848,7 @@ "version": "19.2.3", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", + "dev": true, "license": "MIT", "peer": true, "dependencies": { @@ -14907,6 +14962,7 @@ "version": "16.1.0", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.0.tgz", "integrity": "sha512-E40/hBiP5rCNwkeBN1vRP+xow1X0pndinO+z3h7HLsHyjztbyjfzNWNKuAsJj+7DLam9iT4AaaOZnueCU+Nplg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.4", @@ -15000,6 +15056,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/refractor/-/refractor-5.0.0.tgz", "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==", + "dev": true, "license": "MIT", "dependencies": { "@types/hast": "^3.0.0", @@ -15459,6 +15516,7 @@ "version": "0.27.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true, "license": "MIT" }, "node_modules/schema-utils": { @@ -15783,6 +15841,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -15827,6 +15886,7 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "dev": true, "license": "MIT" }, "node_modules/std-env": { @@ -16101,6 +16161,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz", "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==", + "dev": true, "license": "MIT" }, "node_modules/supports-color": { @@ -17192,6 +17253,7 @@ "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", + "dev": true, "license": "MIT" }, "node_modules/walker": { diff --git a/package.json b/package.json index 80332671e..2cda3f2e4 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,13 @@ "vite": "^7.3.1", "vite-plugin-dts": "^4.5.4", "vite-plugin-lib-inject-css": "^2.2.2", - "vitest": "^4.0.17" + "vitest": "^4.0.17", + "@codemirror/autocomplete": "^6.20.0", + "@codemirror/lang-json": "^6.0.2", + "@monaco-editor/react": "^4.7.0", + "@uiw/codemirror-themes": "^4.25.4", + "@uiw/react-codemirror": "^4.25.4", + "react-syntax-highlighter": "^16.1.0" }, "main": "dist/index.js", "repository": { @@ -121,17 +127,15 @@ "react-dom": "^18.0.0 || ^19.0.0", "react-resizable-panels": "^4.3.1", "react-zoom-pan-pinch": "^3.7.0", - "sonner": "^2.0.7" - }, - "publishConfig": { - "access": "public" - }, - "dependencies": { + "sonner": "^2.0.7", "@codemirror/autocomplete": "^6.20.0", "@codemirror/lang-json": "^6.0.2", "@monaco-editor/react": "^4.7.0", "@uiw/codemirror-themes": "^4.25.4", "@uiw/react-codemirror": "^4.25.4", "react-syntax-highlighter": "^16.1.0" + }, + "publishConfig": { + "access": "public" } }