4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T7c3,'use client'; import { JsonTreeView as JsonTreeViewPrimitive, useJsonTreeView, } from '@ark-ui/react/json-tree-view'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef } from 'react'; import { forwardRef } from 'react'; import { ChevronRightIcon } from '@/lib/moduix/icons/ui'; import styles from './JsonTreeView.module.css'; const JsonTreeViewRoot = forwardRef< ComponentRef, ComponentProps >(function JsonTreeViewRoot({ className, ...props }, ref) { return ( ); }); const JsonTreeViewRootProvider = forwardRef< ComponentRef, ComponentProps >(function JsonTreeViewRootProvider({ className, ...props }, ref) { return ( ); }); const JsonTreeViewTree = forwardRef< ComponentRef, ComponentProps >(function JsonTreeViewTree({ arrow, className, ...props }, ref) { return ( } className={clsx(styles.tree, className)} {...props} data-slot="json-tree-view-tree" /> ); }); const JsonTreeView = Object.assign(JsonTreeViewRoot, { Root: JsonTreeViewRoot, RootProvider: JsonTreeViewRootProvider, Tree: JsonTreeViewTree, }); export { JsonTreeView, useJsonTreeView }; export type { JsonTreeViewRootProps, JsonTreeViewRootProviderProps, JsonTreeViewTreeProps, UseJsonTreeViewProps, UseJsonTreeViewReturn, } from '@ark-ui/react/json-tree-view';52:T163c,@layer moduix.components { .root { box-sizing: border-box; display: flex; width: 100%; min-width: 0; flex-direction: column; color: var(--moduix-color-foreground); font-family: var(--moduix-font-mono); font-size: var(--moduix-text-xs); line-height: var(--moduix-line-height-text-xs); &[data-disabled] { opacity: var(--moduix-opacity-disabled); } } .tree, .root :where([data-scope='json-tree-view'][data-part='branch']) { display: flex; min-width: 0; flex-direction: column; gap: var(--moduix-spacing-1); } .root :where( [data-scope='json-tree-view'][data-part='branch-control'], [data-scope='json-tree-view'][data-part='item'] ) { position: relative; z-index: 0; box-sizing: border-box; display: flex; width: 100%; min-width: 0; min-height: calc(var(--moduix-line-height-text-xs) + (var(--moduix-spacing-0-5) * 2)); align-items: center; gap: var(--moduix-spacing-0-5); border: 0; border-radius: var(--moduix-radius-xs); padding-block: var(--moduix-spacing-0-5); padding-inline-end: var(--moduix-spacing-1); padding-inline-start: calc( var(--moduix-spacing-1) + var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem) ); background-color: transparent; color: inherit; cursor: pointer; font: inherit; outline: none; text-align: start; transition: color var(--moduix-transition-default), opacity var(--moduix-transition-default); user-select: none; &::before { position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; inset-inline-start: calc(var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem)); border-radius: inherit; background-color: transparent; box-shadow: inset 0 0 0 var(--moduix-border-width-sm) transparent; content: ''; pointer-events: none; transition: background-color var(--moduix-transition-default), box-shadow var(--moduix-transition-default); } @media (hover: hover) { &:not([data-disabled]):hover { &::before { background-color: color-mix( in oklab, var(--moduix-color-accent) 72%, var(--moduix-color-background) ); } } } &[data-selected] { &::before { background-color: color-mix( in oklab, var(--moduix-color-accent) 72%, var(--moduix-color-background) ); } } &:focus-visible, &[data-focus] { &::before { box-shadow: inset 0 0 0 var(--moduix-border-width-sm) var(--moduix-color-ring); } } &[data-disabled] { color: var(--moduix-color-muted-foreground); cursor: default; } } .root :where([data-scope='json-tree-view'][data-part='branch-indicator']) { display: inline-flex; width: var(--moduix-spacing-3); height: var(--moduix-spacing-3); flex: 0 0 var(--moduix-spacing-3); align-items: center; justify-content: center; color: color-mix( in oklab, var(--moduix-color-muted-foreground) 42%, var(--moduix-color-foreground) ); transition: transform var(--moduix-transition-default); &[data-state='open'] { transform: rotate(90deg); } & svg { width: var(--moduix-spacing-3); height: var(--moduix-spacing-3); } } .root :where( [data-scope='json-tree-view'][data-part='branch-text'], [data-scope='json-tree-view'][data-part='item-text'] ) { min-width: 0; overflow-wrap: anywhere; } .root :where([data-scope='json-tree-view'][data-part='branch-content']) { display: flex; min-width: 0; flex-direction: column; gap: var(--moduix-spacing-1); overflow: hidden; } .root :where([data-kind='key']) { color: color-mix(in oklab, var(--moduix-color-chart-1) 72%, var(--moduix-color-foreground)); font-weight: var(--moduix-weight-medium); } .root :where([data-kind='colon'], [data-kind='brace'], [data-kind='preview-text']) { color: var(--moduix-color-muted-foreground); } .root :where([data-kind='brace']) { font-weight: var(--moduix-weight-medium); } .root :where([data-kind='preview'][data-type='string']) { color: color-mix(in oklab, var(--moduix-color-success) 78%, var(--moduix-color-foreground)); } .root :where([data-kind='preview'][data-type='number'], [data-kind='preview'][data-type='bigint']) { color: color-mix(in oklab, var(--moduix-color-chart-3) 78%, var(--moduix-color-foreground)); } .root :where([data-kind='preview'][data-type='boolean']) { color: color-mix(in oklab, var(--moduix-color-chart-4) 74%, var(--moduix-color-foreground)); font-weight: var(--moduix-weight-medium); } .root :where([data-kind='preview'][data-type='null'], [data-kind='preview'][data-type='undefined']) { color: var(--moduix-color-muted-foreground); font-style: italic; font-weight: var(--moduix-weight-medium); } .root :where( [data-kind='preview'][data-type='error'], [data-kind='error-stack'], [data-kind='operator'] ) { color: var(--moduix-color-destructive); } .root :where( [data-kind='preview'][data-type='function'], [data-kind='function-type'], [data-kind='function-body'] ) { color: color-mix(in oklab, var(--moduix-color-chart-5) 72%, var(--moduix-color-foreground)); font-style: italic; } .root :where([data-kind='constructor']) { color: var(--moduix-color-muted-foreground); font-weight: var(--moduix-weight-medium); } }4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@ark-ui/react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L4f",null,{"namespace":"@moduix-react","registryDependencies":["@moduix-react/foundation","@moduix-react/icons"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/json-tree-view/JsonTreeView.tsx","content":"$51","type":"registry:component","target":"@components/ui/json-tree-view/JsonTreeView.tsx"},{"path":"src/components/json-tree-view/JsonTreeView.module.css","content":"$52","type":"registry:file","target":"@components/ui/json-tree-view/JsonTreeView.module.css"},{"path":"src/components/json-tree-view/index.ts","content":"export * from './JsonTreeView.js';","type":"registry:component","target":"@components/ui/json-tree-view/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]