@tangle-network/sandbox-ui 0.116.7 → 0.116.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -282,6 +282,7 @@ function ProviderIcon({ id, iconUrl, displayName, size = 24, className }) {
282
282
  }
283
283
  const initial = (displayName ?? id).trim().charAt(0).toUpperCase() || "?";
284
284
  const src = candidates[index];
285
+ const usesDefaultGithubMark = !iconUrl && normalizeProviderId(id) === "github";
285
286
  if (!src) return /* @__PURE__ */ jsx("span", {
286
287
  className: `flex shrink-0 items-center justify-center font-semibold text-white ${className ?? ""}`,
287
288
  style: {
@@ -299,7 +300,7 @@ function ProviderIcon({ id, iconUrl, displayName, size = 24, className }) {
299
300
  width: size,
300
301
  height: size,
301
302
  loading: "lazy",
302
- className: `shrink-0 object-contain ${className ?? ""}`,
303
+ className: `shrink-0 object-contain ${usesDefaultGithubMark ? "dark:invert [[data-sandbox-theme='']_&]:invert" : ""} ${className ?? ""}`,
303
304
  style: {
304
305
  width: size,
305
306
  height: size
package/dist/styles.css CHANGED
@@ -482,6 +482,9 @@
482
482
  .col-span-12 {
483
483
  grid-column: span 12 / span 12;
484
484
  }
485
+ .col-span-full {
486
+ grid-column: 1 / -1;
487
+ }
485
488
  .col-start-1 {
486
489
  grid-column-start: 1;
487
490
  }
@@ -968,6 +971,9 @@
968
971
  .max-h-\[70vh\] {
969
972
  max-height: 70vh;
970
973
  }
974
+ .max-h-\[90dvh\] {
975
+ max-height: 90dvh;
976
+ }
971
977
  .max-h-\[90vh\] {
972
978
  max-height: 90vh;
973
979
  }
@@ -995,9 +1001,15 @@
995
1001
  .min-h-8 {
996
1002
  min-height: calc(var(--spacing) * 8);
997
1003
  }
1004
+ .min-h-9 {
1005
+ min-height: calc(var(--spacing) * 9);
1006
+ }
998
1007
  .min-h-10 {
999
1008
  min-height: calc(var(--spacing) * 10);
1000
1009
  }
1010
+ .min-h-11 {
1011
+ min-height: calc(var(--spacing) * 11);
1012
+ }
1001
1013
  .min-h-24 {
1002
1014
  min-height: calc(var(--spacing) * 24);
1003
1015
  }
@@ -1322,27 +1334,9 @@
1322
1334
  .max-w-6xl {
1323
1335
  max-width: var(--container-6xl);
1324
1336
  }
1325
- .max-w-26 {
1326
- max-width: calc(var(--spacing) * 26);
1327
- }
1328
- .max-w-28 {
1329
- max-width: calc(var(--spacing) * 28);
1330
- }
1331
- .max-w-36 {
1332
- max-width: calc(var(--spacing) * 36);
1333
- }
1334
1337
  .max-w-40 {
1335
1338
  max-width: calc(var(--spacing) * 40);
1336
1339
  }
1337
- .max-w-44 {
1338
- max-width: calc(var(--spacing) * 44);
1339
- }
1340
- .max-w-48 {
1341
- max-width: calc(var(--spacing) * 48);
1342
- }
1343
- .max-w-64 {
1344
- max-width: calc(var(--spacing) * 64);
1345
- }
1346
1340
  .max-w-80 {
1347
1341
  max-width: calc(var(--spacing) * 80);
1348
1342
  }
@@ -1508,6 +1502,9 @@
1508
1502
  .min-w-10 {
1509
1503
  min-width: calc(var(--spacing) * 10);
1510
1504
  }
1505
+ .min-w-11 {
1506
+ min-width: calc(var(--spacing) * 11);
1507
+ }
1511
1508
  .min-w-14 {
1512
1509
  min-width: calc(var(--spacing) * 14);
1513
1510
  }
@@ -1577,6 +1574,9 @@
1577
1574
  .basis-1\/3 {
1578
1575
  flex-basis: calc(1 / 3 * 100%);
1579
1576
  }
1577
+ .table-fixed {
1578
+ table-layout: fixed;
1579
+ }
1580
1580
  .caption-bottom {
1581
1581
  caption-side: bottom;
1582
1582
  }
@@ -1948,6 +1948,9 @@
1948
1948
  .overflow-x-auto {
1949
1949
  overflow-x: auto;
1950
1950
  }
1951
+ .overflow-x-hidden {
1952
+ overflow-x: hidden;
1953
+ }
1951
1954
  .overflow-y-auto {
1952
1955
  overflow-y: auto;
1953
1956
  }
@@ -2226,12 +2229,6 @@
2226
2229
  border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
2227
2230
  }
2228
2231
  }
2229
- .border-destructive\/50 {
2230
- border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
2231
- @supports (color: color-mix(in lab, red, red)) {
2232
- border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
2233
- }
2234
- }
2235
2232
  .border-emerald-500\/30 {
2236
2233
  border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
2237
2234
  @supports (color: color-mix(in lab, red, red)) {
@@ -4845,6 +4842,9 @@
4845
4842
  .sm\:w-auto {
4846
4843
  width: auto;
4847
4844
  }
4845
+ .sm\:shrink-0 {
4846
+ flex-shrink: 0;
4847
+ }
4848
4848
  .sm\:grid-cols-2 {
4849
4849
  grid-template-columns: repeat(2, minmax(0, 1fr));
4850
4850
  }
@@ -4860,6 +4860,9 @@
4860
4860
  .sm\:flex-row {
4861
4861
  flex-direction: row;
4862
4862
  }
4863
+ .sm\:flex-wrap {
4864
+ flex-wrap: wrap;
4865
+ }
4863
4866
  .sm\:items-center {
4864
4867
  align-items: center;
4865
4868
  }
@@ -4960,9 +4963,6 @@
4960
4963
  .md\:grid-cols-5 {
4961
4964
  grid-template-columns: repeat(5, minmax(0, 1fr));
4962
4965
  }
4963
- .md\:flex-row {
4964
- flex-direction: row;
4965
- }
4966
4966
  .md\:items-center {
4967
4967
  align-items: center;
4968
4968
  }
@@ -5039,15 +5039,36 @@
5039
5039
  .xl\:col-span-8 {
5040
5040
  grid-column: span 8 / span 8;
5041
5041
  }
5042
+ .xl\:hidden {
5043
+ display: none;
5044
+ }
5045
+ .xl\:table-cell {
5046
+ display: table-cell;
5047
+ }
5048
+ .xl\:w-52 {
5049
+ width: calc(var(--spacing) * 52);
5050
+ }
5042
5051
  .xl\:grid-cols-2 {
5043
5052
  grid-template-columns: repeat(2, minmax(0, 1fr));
5044
5053
  }
5054
+ .xl\:grid-cols-3 {
5055
+ grid-template-columns: repeat(3, minmax(0, 1fr));
5056
+ }
5045
5057
  .xl\:grid-cols-4 {
5046
5058
  grid-template-columns: repeat(4, minmax(0, 1fr));
5047
5059
  }
5048
5060
  .xl\:grid-cols-5 {
5049
5061
  grid-template-columns: repeat(5, minmax(0, 1fr));
5050
5062
  }
5063
+ .xl\:px-4 {
5064
+ padding-inline: calc(var(--spacing) * 4);
5065
+ }
5066
+ .xl\:px-6 {
5067
+ padding-inline: calc(var(--spacing) * 6);
5068
+ }
5069
+ .xl\:py-5 {
5070
+ padding-block: calc(var(--spacing) * 5);
5071
+ }
5051
5072
  }
5052
5073
  @media (prefers-color-scheme: dark) {
5053
5074
  .dark\:text-neutral-500 {
@@ -5064,6 +5085,10 @@
5064
5085
  color: color-mix(in oklab, var(--color-white) 50%, transparent);
5065
5086
  }
5066
5087
  }
5088
+ .dark\:invert {
5089
+ --tw-invert: invert(100%);
5090
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
5091
+ }
5067
5092
  @media (hover: hover) {
5068
5093
  .dark\:hover\:text-white\/50:hover {
5069
5094
  color: color-mix(in srgb, #fff 50%, transparent);
@@ -5097,12 +5122,6 @@
5097
5122
  .\[\&_svg\]\:shrink-0 svg {
5098
5123
  flex-shrink: 0;
5099
5124
  }
5100
- .\[\&_td\]\:px-4 td {
5101
- padding-inline: calc(var(--spacing) * 4);
5102
- }
5103
- .\[\&_th\]\:px-4 th {
5104
- padding-inline: calc(var(--spacing) * 4);
5105
- }
5106
5125
  .\[\&_tr\]\:border-b tr {
5107
5126
  border-bottom-style: var(--tw-border-style);
5108
5127
  border-bottom-width: 1px;
@@ -5189,6 +5208,10 @@
5189
5208
  border-bottom-style: var(--tw-border-style);
5190
5209
  border-bottom-width: 0px;
5191
5210
  }
5211
+ [data-sandbox-theme=''] .\[\[data-sandbox-theme\=\'\'\]_\&\]\:invert {
5212
+ --tw-invert: invert(100%);
5213
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
5214
+ }
5192
5215
  }
5193
5216
  :root,
5194
5217
  [data-sandbox-ui],
@@ -1,5 +1,5 @@
1
1
  import { t as cn$1 } from "./utils-DzWbktWG.js";
2
- import { o as PortsList } from "./dashboard-_-b7laAR.js";
2
+ import { o as PortsList } from "./dashboard-DwdEQoqK.js";
3
3
  import { n as TerminalView } from "./terminal-DmSUfGha.js";
4
4
  import { RichFileTree } from "./files.js";
5
5
  import { n as PreviewView } from "./embedded-app-view-CoiS_kfY.js";
@@ -7515,7 +7515,6 @@ const DIFF_OPTIONS = {
7515
7515
  dark: "github-dark",
7516
7516
  light: "github-light"
7517
7517
  },
7518
- themeType: "dark",
7519
7518
  stickyHeader: true
7520
7519
  };
7521
7520
  const DIFF_CONTAINER_TAG = "diffs-container";
@@ -7525,7 +7524,7 @@ const DIFF_CONTAINER_TAG = "diffs-container";
7525
7524
  * shadow content. Wrapping is a renderer option, not a CSS patch into its shadow
7526
7525
  * root; the plain patch disclosure is the accessible, engine-independent view.
7527
7526
  */
7528
- function DiffView({ filename, baseline, current, showFileHeader = true, defaultWrap = true, className }) {
7527
+ function DiffView({ filename, baseline, current, showFileHeader = true, defaultWrap = true, themeType = "dark", className }) {
7529
7528
  const patch = React$1.useMemo(() => buildUnifiedPatch(filename, baseline, current), [
7530
7529
  filename,
7531
7530
  baseline,
@@ -7534,6 +7533,12 @@ function DiffView({ filename, baseline, current, showFileHeader = true, defaultW
7534
7533
  const [wrap, setWrap] = React$1.useState(defaultWrap);
7535
7534
  const hintId = React$1.useId();
7536
7535
  const hostRef = React$1.useRef(null);
7536
+ const instanceRef = React$1.useRef(null);
7537
+ const latestThemeType = React$1.useRef(themeType);
7538
+ const appliedThemeType = React$1.useRef(themeType);
7539
+ React$1.useLayoutEffect(() => {
7540
+ latestThemeType.current = themeType;
7541
+ }, [themeType]);
7537
7542
  React$1.useLayoutEffect(() => {
7538
7543
  const host = hostRef.current;
7539
7544
  if (host == null || !patch) return;
@@ -7545,14 +7550,18 @@ function DiffView({ filename, baseline, current, showFileHeader = true, defaultW
7545
7550
  host.appendChild(container);
7546
7551
  const instance = new FileDiff({
7547
7552
  ...DIFF_OPTIONS,
7553
+ themeType: latestThemeType.current,
7548
7554
  overflow: wrap ? "wrap" : "scroll",
7549
7555
  disableFileHeader: !showFileHeader
7550
7556
  }, void 0, false);
7557
+ instanceRef.current = instance;
7558
+ appliedThemeType.current = latestThemeType.current;
7551
7559
  instance.hydrate({
7552
7560
  fileDiff: getSingularPatch(patch),
7553
7561
  fileContainer: container
7554
7562
  });
7555
7563
  return () => {
7564
+ if (instanceRef.current === instance) instanceRef.current = null;
7556
7565
  instance.cleanUp();
7557
7566
  container.remove();
7558
7567
  };
@@ -7561,6 +7570,11 @@ function DiffView({ filename, baseline, current, showFileHeader = true, defaultW
7561
7570
  showFileHeader,
7562
7571
  wrap
7563
7572
  ]);
7573
+ React$1.useLayoutEffect(() => {
7574
+ if (appliedThemeType.current === themeType) return;
7575
+ instanceRef.current?.setThemeType(themeType);
7576
+ appliedThemeType.current = themeType;
7577
+ }, [themeType]);
7564
7578
  if (!patch) return /* @__PURE__ */ jsx("div", {
7565
7579
  className: cn$1("flex h-full min-w-0 items-center justify-center bg-surface-container", className),
7566
7580
  children: /* @__PURE__ */ jsx("p", {
@@ -1,3 +1,3 @@
1
- import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-D_G-wF6u.js";
1
+ import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-z_zNuZHm.js";
2
2
  import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-B_vMTtJn.js";
3
3
  export { type ArtifactView, BRAND_PRISM_THEME, type ChangedFile, ChangesPane, type ChangesPaneProps, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffStatsBadge, DiffView, type DiffViewProps, type EmbeddedApp, EmbeddedAppView, type EmbeddedAppViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, type PreviewAccess, type PreviewReadiness, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };
package/dist/workbench.js CHANGED
@@ -1,3 +1,3 @@
1
- import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-DknSt1S8.js";
1
+ import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-DXTqeu9h.js";
2
2
  import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CoiS_kfY.js";
3
3
  export { BRAND_PRISM_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats, resolveLanguage };
package/dist/workflows.js CHANGED
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
30
30
  });
31
31
  }
32
32
  function lazyWorkflowGraph() {
33
- return lazy(() => retryImport(() => import("./WorkflowGraph-B-NsdYz_.js").then((m) => ({ default: m.WorkflowGraph }))));
33
+ return lazy(() => retryImport(() => import("./WorkflowGraph-CzWs8P7y.js").then((m) => ({ default: m.WorkflowGraph }))));
34
34
  }
35
35
  var GraphErrorBoundary = class extends Component {
36
36
  state = { hasError: false };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/sandbox-ui",
3
- "version": "0.116.7",
3
+ "version": "0.116.9",
4
4
  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
5
5
  "repository": {
6
6
  "type": "git",