@helpwave/hightide 0.9.5 → 0.10.1

package/dist/style/globals.css

@@ -23,7 +23,10 @@
     --color-blue-500: #3272DF;
     --color-blue-600: #285BB2;
     --color-blue-900: #11243E;
+    --color-purple-50: #EFE6FD;
     --color-purple-100: #CEB0FA;
+    --color-purple-200: #B892F3;
+    --color-purple-300: #9B7CDD;
     --color-purple-400: #8470C5;
     --color-purple-500: #694BB4;
     --color-purple-600: #56389B;
@@ -40,6 +43,7 @@
     --color-black: #000000;
     --color-white: #FFFFFF;
     --spacing: 0.25rem;
+    --container-md: 28rem;
     --text-xs: calc(12 / 16 * 1rem);
     --text-xs--line-height: calc(15 / 12);
     --text-sm: calc(14 / 16 * 1rem);
@@ -60,10 +64,15 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-wide: 0.025em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
@@ -125,6 +134,18 @@
     --color-overlay-shadow: #00000039;
     --color-progress-indicator-fill: var(--color-primary);
     --color-progress-indicator-background: var(--color-gray-300);
+    --color-process-model-edge-stroke: var(--color-primary);
+    --color-process-model-edge-label-bg: var(--color-gray-100);
+    --color-process-model-edge-label-text-strong: var(--color-primary);
+    --color-process-model-edge-label-text-muted: var(--color-purple-300);
+    --color-process-model-terminal-fill: var(--color-primary);
+    --color-process-model-terminal-fill-active: var(--color-primary-hover);
+    --color-process-model-terminal-fill-visited: var(--color-purple-400);
+    --color-process-model-activity-icon-bg: var(--color-purple-100);
+    --color-process-model-node-active-ring: var(--color-purple-100);
+    --color-process-model-node-active-bg: var(--color-purple-50);
+    --color-process-model-node-visited-border: var(--color-purple-200);
+    --color-process-model-node-visited-bg: #fdf9ff;
     --color-property-title-background: var(--color-gray-100);
     --color-property-title-text: var(--color-text-secondary);
     --color-stepperbar-dot-active: var(--color-primary);
@@ -146,6 +167,7 @@
     --color-divider: var(--color-gray-100);
     --color-focus: var(--color-primary);
     --color-outline-variant: var(--color-gray-200);
+    --font-inter: 'Inter', sans-serif;
     --font-space: 'Space Grotesk', sans-serif;
     --spacing-element-xs: calc(7 * var(--spacing));
     --spacing-element-sm: calc(9 * var(--spacing));
@@ -360,9 +382,6 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-1 {
-    right: calc(var(--spacing) * 1);
-  }
   .right-1\.5 {
     right: calc(var(--spacing) * 1.5);
   }
@@ -544,6 +563,9 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .table {
     display: table;
   }
@@ -697,6 +719,9 @@
   .min-h-71 {
     min-height: calc(var(--spacing) * 71);
   }
+  .min-h-\[52px\] {
+    min-height: 52px;
+  }
   .min-h-\[400px\] {
     min-height: 400px;
   }
@@ -772,6 +797,12 @@
   .max-w-128 {
     max-width: calc(var(--spacing) * 128);
   }
+  .max-w-\[900px\] {
+    max-width: 900px;
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -796,6 +827,9 @@
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
+  .min-w-48 {
+    min-width: calc(var(--spacing) * 48);
+  }
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
@@ -929,6 +963,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-text {
+    cursor: text;
+  }
   .touch-none {
     touch-action: none;
   }
@@ -1257,6 +1294,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -1419,6 +1459,10 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -2099,6 +2143,10 @@
   &:where([data-theme=dark], [data-theme=dark] *) {
     --color-property-title-background: var(--color-gray-750);
     --color-progress-indicator-background: var(--color-gray-700);
+    --color-process-model-edge-label-bg: var(--color-gray-700);
+    --color-process-model-edge-label-text-muted: var(--color-purple-300);
+    --color-process-model-node-visited-bg: var(--color-gray-750);
+    --color-process-model-node-active-bg: var(--color-gray-700);
     --color-overlay-shadow: #00000060;
     --color-scrollbar-track: #ffffff33;
     --color-scrollbar-thumb: var(--color-gray-300);
@@ -5504,14 +5552,297 @@
     justify-content: space-between;
     border-radius: var(--radius-md);
     padding-inline: calc(var(--spacing) * 3);
-    padding-right: calc(var(--spacing) * 10);
-    &:hover {
-      cursor: pointer;
+    &:focus-within {
+      box-shadow: var(--focus-box-shadow);
+      border-color: var(--focus-border-color);
     }
-    &[type="date"]::-webkit-calendar-picker-indicator, &[type="datetime-local"]::-webkit-calendar-picker-indicator, &[type="time"]::-webkit-calendar-picker-indicator {
-      display: none;
-      -webkit-appearance: none;
+  }
+  [data-name="date-time-field"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 0);
+    min-width: calc(var(--spacing) * 0);
+    flex-grow: 1;
+    align-items: center;
+    overflow: hidden;
+  }
+  [data-name="date-time-segment"] {
+    cursor: text;
+    border-radius: var(--radius-sm);
+    padding-inline: calc(var(--spacing) * 0.5);
+    text-align: center;
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    &:focus {
+      background-color: color-mix(in srgb, #694BB4 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+      }
     }
+    &[data-placeholder] {
+      color: var(--color-placeholder);
+    }
+  }
+  [data-name="date-time-separator"] {
+    padding-inline: 1px;
+  }
+}
+@layer components {
+  .process-model-canvas-wrap {
+    position: relative;
+    overflow: visible;
+    border-radius: var(--radius-2xl);
+    background-color: var(--color-surface);
+    padding: calc(var(--spacing) * 8);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .process-model-svg {
+    display: block;
+    overflow: visible;
+  }
+  .process-model-edge-path {
+    stroke: var(--color-process-model-edge-stroke);
+  }
+  .process-model-edge-marker-fill {
+    fill: var(--color-process-model-edge-stroke);
+  }
+  .process-model-edge-label-bg {
+    fill: var(--color-process-model-edge-label-bg);
+  }
+  .process-model-edge-label-text {
+    font-family: var(--font-inter);
+  }
+  .process-model-edge-label-text-strong {
+    fill: var(--color-process-model-edge-label-text-strong);
+  }
+  .process-model-edge-label-text-muted {
+    fill: var(--color-process-model-edge-label-text-muted);
+  }
+  .process-model-foreign-object {
+    overflow: visible;
+  }
+  .process-model-foreign-object-inner {
+    width: 100%;
+    height: 100%;
+  }
+  .process-model-foreign-object-inner .process-model-activity-node {
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
+  }
+  .process-model-activity-node {
+    display: flex;
+    height: 100%;
+    width: max-content;
+    max-width: 100%;
+    min-width: 120px;
+    cursor: default;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2.5);
+    transition-property: border-color,box-shadow,background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+    -webkit-user-select: none;
+    user-select: none;
+    font-family: var(--font-inter);
+  }
+  .process-model-activity-node:not([data-bordered]) {
+    border-color: transparent;
+  }
+  .process-model-activity-node[data-interactive] {
+    cursor: pointer;
+  }
+  .process-model-activity-node[data-interactive]:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--color-primary);
+  }
+  .process-model-activity-node[data-active] {
+    border-color: var(--color-purple-400);
+    box-shadow: 0 0 0 3px var(--color-process-model-node-active-ring);
+    background-color: var(--color-process-model-node-active-bg);
+  }
+  .process-model-activity-node[data-visited]:not([data-active]) {
+    border-color: var(--color-process-model-node-visited-border);
+    background-color: var(--color-process-model-node-visited-bg);
+  }
+  .process-model-activity-node-icon {
+    display: flex;
+    height: calc(var(--spacing) * 7);
+    width: calc(var(--spacing) * 7);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-process-model-activity-icon-bg);
+  }
+  .process-model-activity-node-icon-svg {
+    color: var(--color-primary);
+  }
+  .process-model-activity-node-text {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    flex-direction: column;
+  }
+  .process-model-activity-node-label {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    white-space: nowrap;
+    color: var(--color-on-surface);
+  }
+  .process-model-activity-node-count {
+    margin-top: 1px;
+    font-size: 11px;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    color: var(--color-description);
+  }
+  .process-model-activity-node[data-kind="terminal"] {
+    gap: calc(var(--spacing) * 3);
+  }
+  .process-model-activity-node[data-kind="terminal"] .process-model-activity-node-icon {
+    height: auto;
+    width: auto;
+    border-radius: 0;
+    background-color: transparent;
+    padding: calc(var(--spacing) * 0);
+  }
+  .process-model-activity-node[data-kind="terminal"] .process-model-activity-node-label {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    white-space: nowrap;
+    color: var(--color-on-surface);
+  }
+  .process-model-activity-node[data-kind="terminal"] .process-model-activity-node-count {
+    margin-top: calc(var(--spacing) * 0.5);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    color: var(--color-description);
+  }
+  .process-model-terminal-node-hex-fill {
+    fill: var(--color-process-model-terminal-fill);
+  }
+  .process-model-activity-node[data-kind="terminal"][data-active] .process-model-terminal-node-hex-fill {
+    fill: var(--color-process-model-terminal-fill-active);
+  }
+  .process-model-activity-node[data-kind="terminal"][data-visited]:not([data-active]) .process-model-terminal-node-hex-fill {
+    fill: var(--color-process-model-terminal-fill-visited);
+  }
+  .process-model-trace-replay {
+    display: flex;
+    width: 100%;
+    max-width: 900px;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 4);
+  }
+  .process-model-trace-replay-toolbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .process-model-trace-replay-speed {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .process-model-trace-replay-speed-label {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-description);
+  }
+  .process-model-trace-log {
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-surface);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .process-model-trace-log-header {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface-variant);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2.5);
+    font-size: 11px;
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+    color: var(--color-description);
+    text-transform: uppercase;
+  }
+  .process-model-trace-log-body {
+    max-height: 110px;
+    overflow-y: auto;
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .process-model-trace-log-placeholder {
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: 11px;
+    color: var(--color-description);
+    font-style: italic;
+  }
+  .process-model-trace-log-event {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: 11px;
+    color: var(--color-on-surface);
+  }
+  .process-model-trace-log-dot {
+    height: calc(var(--spacing) * 1.5);
+    width: calc(var(--spacing) * 1.5);
+    flex-shrink: 0;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--color-primary);
+  }
+  .process-model-trace-log-time {
+    min-width: 36px;
+    flex-shrink: 0;
+    font-size: 10px;
+    color: var(--color-description);
   }
 }
 :root {
@@ -5748,6 +6079,34 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -5817,6 +6176,13 @@
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;
       --tw-duration: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --tw-leading: initial;
+      --tw-tracking: initial;
     }
   }
 }

package/dist/style/uncompiled/theme/colors/component.css

@@ -26,6 +26,20 @@
   --color-progress-indicator-fill: var(--color-primary);
   --color-progress-indicator-background: var(--color-gray-300);
 
+  /* Process model */
+  --color-process-model-edge-stroke: var(--color-primary);
+  --color-process-model-edge-label-bg: var(--color-gray-100);
+  --color-process-model-edge-label-text-strong: var(--color-primary);
+  --color-process-model-edge-label-text-muted: var(--color-purple-300);
+  --color-process-model-terminal-fill: var(--color-primary);
+  --color-process-model-terminal-fill-active: var(--color-primary-hover);
+  --color-process-model-terminal-fill-visited: var(--color-purple-400);
+  --color-process-model-activity-icon-bg: var(--color-purple-100);
+  --color-process-model-node-active-ring: var(--color-purple-100);
+  --color-process-model-node-active-bg: var(--color-purple-50);
+  --color-process-model-node-visited-border: var(--color-purple-200);
+  --color-process-model-node-visited-bg: #fdf9ff;
+
   /* Property */
   --color-property-title-background: var(--color-gray-100);
   --color-property-title-text: var(--color-text-secondary);
@@ -75,6 +89,12 @@
     /* ProgressIndicator */
     --color-progress-indicator-background: var(--color-gray-700);
 
+    /* Process model */
+    --color-process-model-edge-label-bg: var(--color-gray-700);
+    --color-process-model-edge-label-text-muted: var(--color-purple-300);
+    --color-process-model-node-visited-bg: var(--color-gray-750);
+    --color-process-model-node-active-bg: var(--color-gray-700);
+
     /* Overlay, Dialog, Modal */
     --color-overlay-shadow: #00000060;
 

package/dist/style/uncompiled/theme/components/date-time-input.css

@@ -1,16 +1,30 @@
 @layer components {
   [data-name="date-time-input"] {
-    @apply input-element flex-row-2 px-3 pr-10 h-element-md rounded-md w-full items-center justify-between;
+    @apply input-element flex-row-2 items-center justify-between w-full px-3 h-element-md rounded-md;
 
-    &:hover {
-      @apply cursor-pointer;
+    &:focus-within {
+      box-shadow: var(--focus-box-shadow);
+      border-color: var(--focus-border-color);
     }
+  }
+
+  [data-name="date-time-field"] {
+    @apply flex-row-0 items-center min-w-0 grow overflow-hidden;
+  }
+
+  [data-name="date-time-segment"] {
+    @apply rounded-sm px-0.5 text-center tabular-nums cursor-text focus-style-none;
 
-    &[type="date"]::-webkit-calendar-picker-indicator,
-    &[type="datetime-local"]::-webkit-calendar-picker-indicator,
-    &[type="time"]::-webkit-calendar-picker-indicator {
-      display: none;
-      -webkit-appearance: none;
+    &:focus {
+      @apply bg-primary/15;
     }
+
+    &[data-placeholder] {
+      @apply text-placeholder;
+    }
+  }
+
+  [data-name="date-time-separator"] {
+    @apply px-px;
   }
-}
+}

package/dist/style/uncompiled/theme/components/index.css

@@ -27,4 +27,5 @@
 @import "./combobox.css";
 @import "./general.css";
 @import "./icon-button.css";
-@import "./date-time-input.css";
+@import "./date-time-input.css";
+@import "./process-model.css";