@sentropic/design-system-react 0.4.0 → 0.6.0

package/dist/styles.css

@@ -2375,15 +2375,27 @@
 
   .st-forceGraph__edge--weak {
     stroke: var(--st-semantic-border-subtle);
-    stroke-dasharray: 3 3;
     opacity: 0.5;
   }
 
+  /* Emphasised edge (e.g. reconciliation match): thicker, fully opaque, on top. */
+  .st-forceGraph__edge--emphasis {
+    stroke: var(--st-semantic-border-interactive, var(--st-semantic-border-strong));
+    opacity: 0.95;
+  }
+
+  /* Hover: match the node hover (fully visible) so the edge is never paler
+     than the two nodes it connects. */
   .st-forceGraph__edge--hovered {
-    opacity: 0.9;
+    opacity: 1;
     stroke-width: 2;
   }
 
+  /* Dimmed by an active selection (edge touches no selected/focused node). */
+  .st-forceGraph__edge--dim {
+    opacity: 0.12;
+  }
+
   /* Invisible wide hit target for edge hover */
   .st-forceGraph__edgeHit {
     stroke: transparent;
@@ -6799,3 +6811,199 @@
   gap: 0.5rem;
 }
 
+
+/* ==========================================================================
+   Layout system (Flex / Stack / Inline / Container / Row / Col / Hidden /
+   Divider) — ported from components-svelte scoped styles. Dynamic values
+   (gap / align / justify / span / offset) are applied inline via style props.
+   ========================================================================== */
+
+/* Flex / Stack / Inline */
+.st-flex {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* Container */
+.st-container {
+  box-sizing: border-box;
+  inline-size: 100%;
+  margin-inline: auto;
+}
+
+.st-container--sm {
+  max-inline-size: var(--st-container-sm, 40rem);
+}
+
+.st-container--md {
+  max-inline-size: var(--st-container-md, 48rem);
+}
+
+.st-container--lg {
+  max-inline-size: var(--st-container-lg, 64rem);
+}
+
+.st-container--xl {
+  max-inline-size: var(--st-container-xl, 80rem);
+}
+
+.st-container--full {
+  max-inline-size: none;
+}
+
+.st-container--padded {
+  padding-inline: var(--st-spacing-4, 1rem);
+}
+
+/* Row */
+.st-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  inline-size: 100%;
+  min-width: 0;
+}
+
+/* Col */
+.st-col {
+  box-sizing: border-box;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.st-col--auto {
+  flex-basis: auto;
+}
+
+@media (min-width: 640px) {
+  .st-col--has-sm {
+    flex-basis: var(--st-col-sm);
+    max-inline-size: var(--st-col-sm);
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .st-col--has-md {
+    flex-basis: var(--st-col-md);
+    max-inline-size: var(--st-col-md);
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .st-col--has-lg {
+    flex-basis: var(--st-col-lg);
+    max-inline-size: var(--st-col-lg);
+    flex-grow: 0;
+  }
+}
+
+/* Hidden — breakpoints: sm 640 / md 768 / lg 1024 / xl 1280. */
+.st-hidden {
+  display: contents;
+}
+
+/* below: hidden when viewport < breakpoint */
+@media (max-width: 639.98px) {
+  .st-hidden--below-sm {
+    display: none !important;
+  }
+}
+@media (max-width: 767.98px) {
+  .st-hidden--below-md {
+    display: none !important;
+  }
+}
+@media (max-width: 1023.98px) {
+  .st-hidden--below-lg {
+    display: none !important;
+  }
+}
+@media (max-width: 1279.98px) {
+  .st-hidden--below-xl {
+    display: none !important;
+  }
+}
+
+/* above: hidden when viewport >= breakpoint */
+@media (min-width: 640px) {
+  .st-hidden--above-sm {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .st-hidden--above-md {
+    display: none !important;
+  }
+}
+@media (min-width: 1024px) {
+  .st-hidden--above-lg {
+    display: none !important;
+  }
+}
+@media (min-width: 1280px) {
+  .st-hidden--above-xl {
+    display: none !important;
+  }
+}
+
+/* Divider */
+.st-divider {
+  border: 0;
+  box-sizing: border-box;
+  color: var(--st-semantic-border-subtle, #e2e8f0);
+}
+
+.st-divider--horizontal:not(.st-divider--labeled) {
+  block-size: 0;
+  border-block-start-width: 1px;
+  border-block-start-style: solid;
+  border-block-start-color: currentColor;
+  inline-size: 100%;
+}
+
+.st-divider--vertical {
+  align-self: stretch;
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: currentColor;
+  display: inline-block;
+  inline-size: 0;
+  min-block-size: 1em;
+}
+
+.st-divider--dashed.st-divider--horizontal:not(.st-divider--labeled) {
+  border-block-start-style: dashed;
+}
+
+.st-divider--dashed.st-divider--vertical {
+  border-inline-start-style: dashed;
+}
+
+.st-divider--labeled {
+  align-items: center;
+  display: flex;
+  gap: var(--st-spacing-3, 0.75rem);
+  inline-size: 100%;
+}
+
+.st-divider__line {
+  block-size: 0;
+  border-block-start-width: 1px;
+  border-block-start-style: solid;
+  border-block-start-color: currentColor;
+  flex: 1 1 0;
+}
+
+.st-divider--dashed .st-divider__line {
+  border-block-start-style: dashed;
+}
+
+.st-divider__label {
+  color: var(--st-semantic-text-secondary, inherit);
+  flex: 0 0 auto;
+  font-size: var(--st-font-size-sm, 0.875rem);
+  line-height: 1;
+  white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-react",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "React components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {