@powerhousedao/design-system 6.2.0-dev.4 → 6.2.0-dev.40

package/dist/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-result-counter.js","names":["SearchResultCounter","isSearching","activeIndex","totalResults"],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.tsx"],"sourcesContent":["interface SearchResultCounterProps {\n  isSearching: boolean;\n  activeIndex: number;\n  totalResults: number;\n}\n\nexport const SearchResultCounter: React.FC<SearchResultCounterProps> = ({\n  isSearching,\n  activeIndex,\n  totalResults,\n}) => {\n  if (isSearching) {\n    return (\n      <div className=\"h-4 w-6 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-800\" />\n    );\n  }\n\n  return (\n    <div className=\"text-xs\">\n      {totalResults > 0 ? (\n        <>\n          <span className=\"text-gray-700 dark:text-slate-50\">\n            {activeIndex + 1}\n          </span>\n          <span className=\"text-gray-500 dark:text-slate-700\">\n            /{totalResults}\n          </span>\n        </>\n      ) : (\n        <span className=\"text-gray-500 dark:text-slate-700\">0/0</span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;AAMA,MAAaA,uBAA2D,EACtEC,aACAC,aACAC,mBACI;AACJ,KAAIF,YACF,QACE,oBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;AAItF,QACE,oBAAC,OAAD;EAAK,WAAU;YACZE,eAAe,IACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACbD,cAAc;GACX,CAAA,EACN,qBAAC,QAAD;GAAM,WAAU;aAAhB,CAAmD,KAC/CC,aACE;KACL,EAAA,CAAA,GAEH,oBAAC,QAAD;GAAM,WAAU;aAAoC;GACrD,CAAA;EACG,CAAA"}
+{"version":3,"file":"search-result-counter.js","names":["SearchResultCounter","isSearching","activeIndex","totalResults"],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.tsx"],"sourcesContent":["interface SearchResultCounterProps {\n  isSearching: boolean;\n  activeIndex: number;\n  totalResults: number;\n}\n\nexport const SearchResultCounter: React.FC<SearchResultCounterProps> = ({\n  isSearching,\n  activeIndex,\n  totalResults,\n}) => {\n  if (isSearching) {\n    return <div className=\"h-4 w-6 animate-pulse rounded-sm bg-secondary\" />;\n  }\n\n  return (\n    <div className=\"text-xs\">\n      {totalResults > 0 ? (\n        <>\n          <span className=\"text-foreground\">{activeIndex + 1}</span>\n          <span className=\"text-muted-foreground\">/{totalResults}</span>\n        </>\n      ) : (\n        <span className=\"text-muted-foreground\">0/0</span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;AAMA,MAAaA,uBAA2D,EACtEC,aACAC,aACAC,mBACI;AACJ,KAAIF,YACF,QAAO,oBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;AAG1E,QACE,oBAAC,OAAD;EAAK,WAAU;YACZE,eAAe,IACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aAAmBD,cAAc;GAAQ,CAAA,EACzD,qBAAC,QAAD;GAAM,WAAU;aAAhB,CAAwC,KAAEC,aAAmB;KAC5D,EAAA,CAAA,GAEH,oBAAC,QAAD;GAAM,WAAU;aAAwB;GACzC,CAAA;EACG,CAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.js

@@ -15,7 +15,7 @@ const SidebarSearch = ({ showStatusFilter }) => {
 		if (searchControlsRef.current) setSearchControlsPaddingRight(searchControlsRef.current.clientWidth + 16);
 	}, [searchTerm]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full gap-2 border-t border-gray-300 p-2 dark:border-slate-800",
+		className: "flex w-full gap-2 border-t border-sidebar-border p-2",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative flex-1",
 			children: [
@@ -35,7 +35,7 @@ const SidebarSearch = ({ showStatusFilter }) => {
 				/* @__PURE__ */ jsx(Search, {
 					height: 16,
 					width: 16,
-					className: "absolute top-1/2 left-2 -translate-y-1/2 text-gray-700 dark:text-slate-50"
+					className: "absolute top-1/2 left-2 -translate-y-1/2 text-foreground"
 				}),
 				searchTerm && /* @__PURE__ */ jsxs("div", {
 					ref: searchControlsRef,
@@ -47,7 +47,7 @@ const SidebarSearch = ({ showStatusFilter }) => {
 							totalResults: searchResults.length
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col text-gray-500 dark:text-slate-700",
+							className: "flex flex-col text-muted-foreground",
 							children: [/* @__PURE__ */ jsx(SearchNavigationArrow, {
 								direction: "up",
 								isDisabled: activeSearchIndex === 0,
@@ -62,7 +62,7 @@ const SidebarSearch = ({ showStatusFilter }) => {
 							onClick: () => changeSearchTerm(""),
 							height: 16,
 							width: 16,
-							className: "cursor-pointer text-gray-500 hover:text-gray-700 active:text-gray-900 dark:text-slate-700 dark:hover:text-slate-600 dark:active:text-slate-300"
+							className: "cursor-pointer text-muted-foreground hover:hover-effect active:active-effect"
 						})
 					]
 				})
@@ -71,7 +71,7 @@ const SidebarSearch = ({ showStatusFilter }) => {
 			type: "button",
 			onClick: toggleStatusFilter,
 			tabIndex: 1,
-			className: twMerge("rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500", isStatusFilterEnabled ? "border-blue-500 bg-blue-100 text-blue-900" : "hover:bg-gray-100 hover:text-gray-700"),
+			className: twMerge("rounded-md border border-border px-2 py-1 text-sm text-muted-foreground", isStatusFilterEnabled ? "border-info bg-info/10 text-info" : "hover:hover-effect"),
 			children: /* @__PURE__ */ jsx(Tabler, {
 				height: 16,
 				width: 16

package/dist/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-search.js","names":["useLayoutEffect","useRef","useState","twMerge","Input","CrossCircle","Search","Tabler","useSidebar","SearchNavigationArrow","SearchResultCounter","SidebarSearch","showStatusFilter","searchTerm","isSearching","searchResults","activeSearchIndex","isStatusFilterEnabled","changeSearchTerm","nextSearchResult","previousSearchResult","toggleStatusFilter","searchControlsRef","searchControlsPaddingRight","setSearchControlsPaddingRight","current","clientWidth","e","target","value","key","paddingRight","length"],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Input } from \"../../../input/input.js\";\nimport CrossCircle from \"../../../../../powerhouse/components/icon-components/CrossCircle.js\";\nimport Search from \"../../../../../powerhouse/components/icon-components/Search.js\";\nimport Tabler from \"../../../../../powerhouse/components/icon-components/Tabler.js\";\nimport { useSidebar } from \"../sidebar-provider/index.js\";\nimport { SearchNavigationArrow } from \"./search-navigation-arrow.js\";\nimport { SearchResultCounter } from \"./search-result-counter.js\";\n\ninterface SidebarSearchProps {\n  showStatusFilter: boolean;\n}\n\nexport const SidebarSearch: React.FC<SidebarSearchProps> = ({\n  showStatusFilter,\n}) => {\n  const {\n    searchTerm,\n    isSearching,\n    searchResults,\n    activeSearchIndex,\n    isStatusFilterEnabled,\n    changeSearchTerm,\n    nextSearchResult,\n    previousSearchResult,\n    toggleStatusFilter,\n  } = useSidebar();\n  const searchControlsRef = useRef<HTMLDivElement>(null);\n  const [searchControlsPaddingRight, setSearchControlsPaddingRight] =\n    useState(16);\n\n  useLayoutEffect(() => {\n    if (searchControlsRef.current) {\n      setSearchControlsPaddingRight(searchControlsRef.current.clientWidth + 16);\n    }\n  }, [searchTerm]);\n\n  return (\n    <div className=\"flex w-full gap-2 border-t border-gray-300 p-2 dark:border-slate-800\">\n      <div className=\"relative flex-1\">\n        <Input\n          type=\"search\"\n          value={searchTerm}\n          onChange={(e) => changeSearchTerm(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\" || e.key === \"Enter\") {\n              nextSearchResult();\n            } else if (e.key === \"ArrowUp\") {\n              previousSearchResult();\n            }\n          }}\n          tabIndex={1}\n          placeholder=\"Search\"\n          className=\"w-full appearance-none pl-8 [&::-webkit-search-cancel-button]:hidden\"\n          style={{ paddingRight: searchControlsPaddingRight }}\n        />\n\n        <Search\n          height={16}\n          width={16}\n          className=\"absolute top-1/2 left-2 -translate-y-1/2 text-gray-700 dark:text-slate-50\"\n        />\n\n        {/* Search controls - only shown when there's a search term */}\n        {searchTerm && (\n          <div\n            ref={searchControlsRef}\n            className=\"absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-2 select-none\"\n          >\n            <SearchResultCounter\n              isSearching={isSearching}\n              activeIndex={activeSearchIndex}\n              totalResults={searchResults.length}\n            />\n\n            <div className=\"flex flex-col text-gray-500 dark:text-slate-700\">\n              <SearchNavigationArrow\n                direction=\"up\"\n                isDisabled={activeSearchIndex === 0}\n                onClick={previousSearchResult}\n              />\n              <SearchNavigationArrow\n                direction=\"down\"\n                isDisabled={activeSearchIndex === searchResults.length - 1}\n                onClick={nextSearchResult}\n              />\n            </div>\n\n            {/* Clear search button */}\n            <CrossCircle\n              onClick={() => changeSearchTerm(\"\")}\n              height={16}\n              width={16}\n              className=\"cursor-pointer text-gray-500 hover:text-gray-700 active:text-gray-900 dark:text-slate-700 dark:hover:text-slate-600 dark:active:text-slate-300\"\n            />\n          </div>\n        )}\n      </div>\n\n      {showStatusFilter && (\n        <button\n          type=\"button\"\n          onClick={toggleStatusFilter}\n          tabIndex={1}\n          className={twMerge(\n            \"rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500\",\n            isStatusFilterEnabled\n              ? \"border-blue-500 bg-blue-100 text-blue-900\"\n              : \"hover:bg-gray-100 hover:text-gray-700\",\n          )}\n        >\n          <Tabler height={16} width={16} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,MAAaW,iBAA+C,EAC1DC,uBACI;CACJ,MAAM,EACJC,YACAC,aACAC,eACAC,mBACAC,uBACAC,kBACAC,kBACAC,sBACAC,uBACEb,YAAY;CAChB,MAAMc,oBAAoBrB,OAAuB,KAAK;CACtD,MAAM,CAACsB,4BAA4BC,iCACjCtB,SAAS,GAAG;AAEdF,uBAAsB;AACpB,MAAIsB,kBAAkBG,QACpBD,+BAA8BF,kBAAkBG,QAAQC,cAAc,GAAG;IAE1E,CAACb,WAAW,CAAC;AAEhB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD;KACE,MAAK;KACL,OAAOA;KACP,WAAWc,MAAMT,iBAAiBS,EAAEC,OAAOC,MAAM;KACjD,YAAYF,MAAM;AAChB,UAAIA,EAAEG,QAAQ,eAAeH,EAAEG,QAAQ,QACrCX,mBAAkB;eACTQ,EAAEG,QAAQ,UACnBV,uBAAsB;;KAG1B,UAAU;KACV,aAAY;KACZ,WAAU;KACV,OAAO,EAAEW,cAAcR,4BAA4B;KAAC,CAAA;IAGtD,oBAAC,QAAD;KACE,QAAQ;KACR,OAAO;KACP,WAAU;KAA2E,CAAA;IAItFV,cACC,qBAAC,OAAD;KACE,KAAKS;KACL,WAAU;eAFZ;MAIE,oBAAC,qBAAD;OACeR;OACb,aAAaE;OACb,cAAcD,cAAciB;OAAO,CAAA;MAGrC,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,uBAAD;QACE,WAAU;QACV,YAAYhB,sBAAsB;QAClC,SAASI;QAAqB,CAAA,EAEhC,oBAAC,uBAAD;QACE,WAAU;QACV,YAAYJ,sBAAsBD,cAAciB,SAAS;QACzD,SAASb;QAAiB,CAAA,CAEzB;;MAGL,oBAAC,aAAD;OACE,eAAeD,iBAAiB,GAAG;OACnC,QAAQ;OACR,OAAO;OACP,WAAU;OAAgJ,CAAA;MAG/J;;IACE;MAEJN,oBACC,oBAAC,UAAD;GACE,MAAK;GACL,SAASS;GACT,UAAU;GACV,WAAWlB,QACT,qEACAc,wBACI,8CACA,wCACL;aAED,oBAAC,QAAD;IAAQ,QAAQ;IAAI,OAAO;IAAG,CAAA;GAEjC,CAAA,CACG"}
+{"version":3,"file":"sidebar-search.js","names":["useLayoutEffect","useRef","useState","twMerge","Input","CrossCircle","Search","Tabler","useSidebar","SearchNavigationArrow","SearchResultCounter","SidebarSearch","showStatusFilter","searchTerm","isSearching","searchResults","activeSearchIndex","isStatusFilterEnabled","changeSearchTerm","nextSearchResult","previousSearchResult","toggleStatusFilter","searchControlsRef","searchControlsPaddingRight","setSearchControlsPaddingRight","current","clientWidth","e","target","value","key","paddingRight","length"],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Input } from \"../../../input/input.js\";\nimport CrossCircle from \"../../../../../powerhouse/components/icon-components/CrossCircle.js\";\nimport Search from \"../../../../../powerhouse/components/icon-components/Search.js\";\nimport Tabler from \"../../../../../powerhouse/components/icon-components/Tabler.js\";\nimport { useSidebar } from \"../sidebar-provider/index.js\";\nimport { SearchNavigationArrow } from \"./search-navigation-arrow.js\";\nimport { SearchResultCounter } from \"./search-result-counter.js\";\n\ninterface SidebarSearchProps {\n  showStatusFilter: boolean;\n}\n\nexport const SidebarSearch: React.FC<SidebarSearchProps> = ({\n  showStatusFilter,\n}) => {\n  const {\n    searchTerm,\n    isSearching,\n    searchResults,\n    activeSearchIndex,\n    isStatusFilterEnabled,\n    changeSearchTerm,\n    nextSearchResult,\n    previousSearchResult,\n    toggleStatusFilter,\n  } = useSidebar();\n  const searchControlsRef = useRef<HTMLDivElement>(null);\n  const [searchControlsPaddingRight, setSearchControlsPaddingRight] =\n    useState(16);\n\n  useLayoutEffect(() => {\n    if (searchControlsRef.current) {\n      setSearchControlsPaddingRight(searchControlsRef.current.clientWidth + 16);\n    }\n  }, [searchTerm]);\n\n  return (\n    <div className=\"flex w-full gap-2 border-t border-sidebar-border p-2\">\n      <div className=\"relative flex-1\">\n        <Input\n          type=\"search\"\n          value={searchTerm}\n          onChange={(e) => changeSearchTerm(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\" || e.key === \"Enter\") {\n              nextSearchResult();\n            } else if (e.key === \"ArrowUp\") {\n              previousSearchResult();\n            }\n          }}\n          tabIndex={1}\n          placeholder=\"Search\"\n          className=\"w-full appearance-none pl-8 [&::-webkit-search-cancel-button]:hidden\"\n          style={{ paddingRight: searchControlsPaddingRight }}\n        />\n\n        <Search\n          height={16}\n          width={16}\n          className=\"absolute top-1/2 left-2 -translate-y-1/2 text-foreground\"\n        />\n\n        {/* Search controls - only shown when there's a search term */}\n        {searchTerm && (\n          <div\n            ref={searchControlsRef}\n            className=\"absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-2 select-none\"\n          >\n            <SearchResultCounter\n              isSearching={isSearching}\n              activeIndex={activeSearchIndex}\n              totalResults={searchResults.length}\n            />\n\n            <div className=\"flex flex-col text-muted-foreground\">\n              <SearchNavigationArrow\n                direction=\"up\"\n                isDisabled={activeSearchIndex === 0}\n                onClick={previousSearchResult}\n              />\n              <SearchNavigationArrow\n                direction=\"down\"\n                isDisabled={activeSearchIndex === searchResults.length - 1}\n                onClick={nextSearchResult}\n              />\n            </div>\n\n            {/* Clear search button */}\n            <CrossCircle\n              onClick={() => changeSearchTerm(\"\")}\n              height={16}\n              width={16}\n              className=\"cursor-pointer text-muted-foreground hover:hover-effect active:active-effect\"\n            />\n          </div>\n        )}\n      </div>\n\n      {showStatusFilter && (\n        <button\n          type=\"button\"\n          onClick={toggleStatusFilter}\n          tabIndex={1}\n          className={twMerge(\n            \"rounded-md border border-border px-2 py-1 text-sm text-muted-foreground\",\n            isStatusFilterEnabled\n              ? \"border-info bg-info/10 text-info\"\n              : \"hover:hover-effect\",\n          )}\n        >\n          <Tabler height={16} width={16} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,MAAaW,iBAA+C,EAC1DC,uBACI;CACJ,MAAM,EACJC,YACAC,aACAC,eACAC,mBACAC,uBACAC,kBACAC,kBACAC,sBACAC,uBACEb,YAAY;CAChB,MAAMc,oBAAoBrB,OAAuB,KAAK;CACtD,MAAM,CAACsB,4BAA4BC,iCACjCtB,SAAS,GAAG;AAEdF,uBAAsB;AACpB,MAAIsB,kBAAkBG,QACpBD,+BAA8BF,kBAAkBG,QAAQC,cAAc,GAAG;IAE1E,CAACb,WAAW,CAAC;AAEhB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD;KACE,MAAK;KACL,OAAOA;KACP,WAAWc,MAAMT,iBAAiBS,EAAEC,OAAOC,MAAM;KACjD,YAAYF,MAAM;AAChB,UAAIA,EAAEG,QAAQ,eAAeH,EAAEG,QAAQ,QACrCX,mBAAkB;eACTQ,EAAEG,QAAQ,UACnBV,uBAAsB;;KAG1B,UAAU;KACV,aAAY;KACZ,WAAU;KACV,OAAO,EAAEW,cAAcR,4BAA4B;KAAC,CAAA;IAGtD,oBAAC,QAAD;KACE,QAAQ;KACR,OAAO;KACP,WAAU;KAA0D,CAAA;IAIrEV,cACC,qBAAC,OAAD;KACE,KAAKS;KACL,WAAU;eAFZ;MAIE,oBAAC,qBAAD;OACeR;OACb,aAAaE;OACb,cAAcD,cAAciB;OAAO,CAAA;MAGrC,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,uBAAD;QACE,WAAU;QACV,YAAYhB,sBAAsB;QAClC,SAASI;QAAqB,CAAA,EAEhC,oBAAC,uBAAD;QACE,WAAU;QACV,YAAYJ,sBAAsBD,cAAciB,SAAS;QACzD,SAASb;QAAiB,CAAA,CAEzB;;MAGL,oBAAC,aAAD;OACE,eAAeD,iBAAiB,GAAG;OACnC,QAAQ;OACR,OAAO;OACP,WAAU;OAA8E,CAAA;MAG7F;;IACE;MAEJN,oBACC,oBAAC,UAAD;GACE,MAAK;GACL,SAASS;GACT,UAAU;GACV,WAAWlB,QACT,2EACAc,wBACI,qCACA,qBACL;aAED,oBAAC,QAAD;IAAQ,QAAQ;IAAI,OAAO;IAAG,CAAA;GAEjC,CAAA,CACG"}

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton-item.js

@@ -10,8 +10,8 @@ const SidebarSkeletonItem = ({ depth, textWidth, style }) => {
 			style: { paddingLeft: depth * 24 + 8 },
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex size-4 min-w-4 items-center justify-center",
-				children: /* @__PURE__ */ jsx("div", { className: "size-4 min-w-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600" })
-			}), /* @__PURE__ */ jsx("div", { className: twMerge("h-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600", textWidth) })]
+				children: /* @__PURE__ */ jsx("div", { className: "size-4 min-w-4 animate-pulse rounded-sm bg-secondary" })
+			}), /* @__PURE__ */ jsx("div", { className: twMerge("h-4 animate-pulse rounded-sm bg-secondary", textWidth) })]
 		})
 	});
 };

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-skeleton-item.js","names":["twMerge","SidebarSkeletonItem","depth","textWidth","style","paddingLeft"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-skeleton-item.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\ninterface SidebarSkeletonItemProps {\n  depth: number;\n  textWidth: string;\n  style?: React.CSSProperties;\n}\n\nexport const SidebarSkeletonItem = ({\n  depth,\n  textWidth,\n  style,\n}: SidebarSkeletonItemProps) => {\n  const paddingLeft = depth * 24;\n\n  return (\n    <div style={style} className=\"flex items-center px-2\">\n      <div\n        className=\"flex h-8 w-full items-center gap-2 px-2 py-1\"\n        style={{ paddingLeft: paddingLeft + 8 }}\n      >\n        {/* Chevron icon skeleton */}\n        <div className=\"flex size-4 min-w-4 items-center justify-center\">\n          <div className=\"size-4 min-w-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600\" />\n        </div>\n\n        {/* Text content skeleton */}\n        <div\n          className={twMerge(\n            \"h-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600\",\n            textWidth,\n          )}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAQA,MAAaC,uBAAuB,EAClCC,OACAC,WACAC,YAC8B;AAG9B,QACE,oBAAC,OAAD;EAAYA;EAAO,WAAU;YAC3B,qBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAEC,aANKH,QAAQ,KAMc,GAAG;aAFzC,CAKE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,yEAAuE,CAAA;IACnF,CAAA,EAGL,oBAAC,OAAD,EACE,WAAWF,QACT,8DACAG,UACD,EAAC,CAAA,CAED;;EACD,CAAA"}
+{"version":3,"file":"sidebar-skeleton-item.js","names":["twMerge","SidebarSkeletonItem","depth","textWidth","style","paddingLeft"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-skeleton-item.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\ninterface SidebarSkeletonItemProps {\n  depth: number;\n  textWidth: string;\n  style?: React.CSSProperties;\n}\n\nexport const SidebarSkeletonItem = ({\n  depth,\n  textWidth,\n  style,\n}: SidebarSkeletonItemProps) => {\n  const paddingLeft = depth * 24;\n\n  return (\n    <div style={style} className=\"flex items-center px-2\">\n      <div\n        className=\"flex h-8 w-full items-center gap-2 px-2 py-1\"\n        style={{ paddingLeft: paddingLeft + 8 }}\n      >\n        {/* Chevron icon skeleton */}\n        <div className=\"flex size-4 min-w-4 items-center justify-center\">\n          <div className=\"size-4 min-w-4 animate-pulse rounded-sm bg-secondary\" />\n        </div>\n\n        {/* Text content skeleton */}\n        <div\n          className={twMerge(\n            \"h-4 animate-pulse rounded-sm bg-secondary\",\n            textWidth,\n          )}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAQA,MAAaC,uBAAuB,EAClCC,OACAC,WACAC,YAC8B;AAG9B,QACE,oBAAC,OAAD;EAAYA;EAAO,WAAU;YAC3B,qBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAEC,aANKH,QAAQ,KAMc,GAAG;aAFzC,CAKE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,wDAAsD,CAAA;IAClE,CAAA,EAGL,oBAAC,OAAD,EACE,WAAWF,QACT,6CACAG,UACD,EAAC,CAAA,CAED;;EACD,CAAA"}

package/dist/ui/components/sidebar/subcomponents/status-icon.js

@@ -6,34 +6,34 @@ const STATUS_ICON_MAP = {
 	[NodeStatus.CREATED]: { icon: /* @__PURE__ */ jsx(Created, {
 		height: 16,
 		width: 16,
-		className: "text-green-900"
+		className: "text-success"
 	}) },
 	[NodeStatus.MODIFIED]: { icon: /* @__PURE__ */ jsx(Modified, {
 		height: 16,
 		width: 16,
-		className: "text-blue-900"
+		className: "text-info"
 	}) },
 	[NodeStatus.REMOVED]: { icon: /* @__PURE__ */ jsx(Removed, {
 		height: 16,
 		width: 16,
-		className: "text-red-900"
+		className: "text-destructive"
 	}) },
 	[NodeStatus.MOVED]: { icon: /* @__PURE__ */ jsx(Moved, {
 		height: 16,
 		width: 16,
-		className: "text-blue-900"
+		className: "text-info"
 	}) },
 	[NodeStatus.DUPLICATED]: { icon: /* @__PURE__ */ jsx(Duplicated, {
 		height: 16,
 		width: 16,
-		className: "text-blue-900"
+		className: "text-info"
 	}) }
 };
 const StatusIcon = ({ status, isDescendenceModified }) => {
 	if (status === NodeStatus.UNCHANGED) return isDescendenceModified ? /* @__PURE__ */ jsx(DescendenceModified, {
 		height: 16,
 		width: 16,
-		className: "text-gray-500"
+		className: "text-muted-foreground"
 	}) : null;
 	return STATUS_ICON_MAP[status].icon;
 };

package/dist/ui/components/sidebar/subcomponents/status-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-icon.js","names":["Created","DescendenceModified","Duplicated","Modified","Moved","Removed","NodeStatus","STATUS_ICON_MAP","CREATED","icon","MODIFIED","REMOVED","MOVED","DUPLICATED","StatusIcon","status","isDescendenceModified","UNCHANGED"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/status-icon.tsx"],"sourcesContent":["import Created from \"../../../../powerhouse/components/icon-components/Created.js\";\nimport DescendenceModified from \"../../../../powerhouse/components/icon-components/DescendenceModified.js\";\nimport Duplicated from \"../../../../powerhouse/components/icon-components/Duplicated.js\";\nimport Modified from \"../../../../powerhouse/components/icon-components/Modified.js\";\nimport Moved from \"../../../../powerhouse/components/icon-components/Moved.js\";\nimport Removed from \"../../../../powerhouse/components/icon-components/Removed.js\";\nimport { NodeStatus } from \"../types.js\";\n\ninterface StatusIconProps {\n  status: NodeStatus;\n  isDescendenceModified?: boolean;\n}\n\nconst STATUS_ICON_MAP: Record<\n  Exclude<NodeStatus, NodeStatus.UNCHANGED>,\n  { icon: React.ReactNode }\n> = {\n  [NodeStatus.CREATED]: {\n    icon: <Created height={16} width={16} className=\"text-green-900\" />,\n  },\n  [NodeStatus.MODIFIED]: {\n    icon: <Modified height={16} width={16} className=\"text-blue-900\" />,\n  },\n  [NodeStatus.REMOVED]: {\n    icon: <Removed height={16} width={16} className=\"text-red-900\" />,\n  },\n  [NodeStatus.MOVED]: {\n    icon: <Moved height={16} width={16} className=\"text-blue-900\" />,\n  },\n  [NodeStatus.DUPLICATED]: {\n    icon: <Duplicated height={16} width={16} className=\"text-blue-900\" />,\n  },\n};\n\nexport const StatusIcon = ({\n  status,\n  isDescendenceModified,\n}: StatusIconProps) => {\n  if (status === NodeStatus.UNCHANGED) {\n    return isDescendenceModified ? (\n      <DescendenceModified height={16} width={16} className=\"text-gray-500\" />\n    ) : null;\n  }\n\n  return STATUS_ICON_MAP[status].icon;\n};\n"],"mappings":";;;;AAaA,MAAMO,kBAGF;EACDD,WAAWE,UAAU,EACpBC,MAAM,oBAAC,SAAD;EAAS,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAgB,CAAA,EACjE;EACAH,WAAWI,WAAW,EACrBD,MAAM,oBAAC,UAAD;EAAU,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAe,CAAA,EACjE;EACAH,WAAWK,UAAU,EACpBF,MAAM,oBAAC,SAAD;EAAS,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAc,CAAA,EAC/D;EACAH,WAAWM,QAAQ,EAClBH,MAAM,oBAAC,OAAD;EAAO,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAe,CAAA,EAC9D;EACAH,WAAWO,aAAa,EACvBJ,MAAM,oBAAC,YAAD;EAAY,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAe,CAAA,EACpE;CACD;AAED,MAAaK,cAAc,EACzBC,QACAC,4BACqB;AACrB,KAAID,WAAWT,WAAWW,UACxB,QAAOD,wBACL,oBAAC,qBAAD;EAAqB,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAkB,CAAA,GACtE;AAGN,QAAOT,gBAAgBQ,QAAQN"}
+{"version":3,"file":"status-icon.js","names":["Created","DescendenceModified","Duplicated","Modified","Moved","Removed","NodeStatus","STATUS_ICON_MAP","CREATED","icon","MODIFIED","REMOVED","MOVED","DUPLICATED","StatusIcon","status","isDescendenceModified","UNCHANGED"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/status-icon.tsx"],"sourcesContent":["import Created from \"../../../../powerhouse/components/icon-components/Created.js\";\nimport DescendenceModified from \"../../../../powerhouse/components/icon-components/DescendenceModified.js\";\nimport Duplicated from \"../../../../powerhouse/components/icon-components/Duplicated.js\";\nimport Modified from \"../../../../powerhouse/components/icon-components/Modified.js\";\nimport Moved from \"../../../../powerhouse/components/icon-components/Moved.js\";\nimport Removed from \"../../../../powerhouse/components/icon-components/Removed.js\";\nimport { NodeStatus } from \"../types.js\";\n\ninterface StatusIconProps {\n  status: NodeStatus;\n  isDescendenceModified?: boolean;\n}\n\nconst STATUS_ICON_MAP: Record<\n  Exclude<NodeStatus, NodeStatus.UNCHANGED>,\n  { icon: React.ReactNode }\n> = {\n  [NodeStatus.CREATED]: {\n    icon: <Created height={16} width={16} className=\"text-success\" />,\n  },\n  [NodeStatus.MODIFIED]: {\n    icon: <Modified height={16} width={16} className=\"text-info\" />,\n  },\n  [NodeStatus.REMOVED]: {\n    icon: <Removed height={16} width={16} className=\"text-destructive\" />,\n  },\n  [NodeStatus.MOVED]: {\n    icon: <Moved height={16} width={16} className=\"text-info\" />,\n  },\n  [NodeStatus.DUPLICATED]: {\n    icon: <Duplicated height={16} width={16} className=\"text-info\" />,\n  },\n};\n\nexport const StatusIcon = ({\n  status,\n  isDescendenceModified,\n}: StatusIconProps) => {\n  if (status === NodeStatus.UNCHANGED) {\n    return isDescendenceModified ? (\n      <DescendenceModified\n        height={16}\n        width={16}\n        className=\"text-muted-foreground\"\n      />\n    ) : null;\n  }\n\n  return STATUS_ICON_MAP[status].icon;\n};\n"],"mappings":";;;;AAaA,MAAMO,kBAGF;EACDD,WAAWE,UAAU,EACpBC,MAAM,oBAAC,SAAD;EAAS,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAc,CAAA,EAC/D;EACAH,WAAWI,WAAW,EACrBD,MAAM,oBAAC,UAAD;EAAU,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAW,CAAA,EAC7D;EACAH,WAAWK,UAAU,EACpBF,MAAM,oBAAC,SAAD;EAAS,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAkB,CAAA,EACnE;EACAH,WAAWM,QAAQ,EAClBH,MAAM,oBAAC,OAAD;EAAO,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAW,CAAA,EAC1D;EACAH,WAAWO,aAAa,EACvBJ,MAAM,oBAAC,YAAD;EAAY,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAW,CAAA,EAChE;CACD;AAED,MAAaK,cAAc,EACzBC,QACAC,4BACqB;AACrB,KAAID,WAAWT,WAAWW,UACxB,QAAOD,wBACL,oBAAC,qBAAD;EACE,QAAQ;EACR,OAAO;EACP,WAAU;EACV,CAAA,GACA;AAGN,QAAOT,gBAAgBQ,QAAQN"}

package/dist/ui/components/tooltip/tooltip.js

@@ -7,7 +7,7 @@ const TooltipContent = /* @__PURE__ */ forwardRef(({ children, className, ...pro
 	return /* @__PURE__ */ jsx(Content, {
 		ref,
 		...props,
-		className: twMerge("z-50 overflow-hidden rounded-md text-sm", "border border-gray-200 bg-gray-50 text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", "px-3 py-1.5 shadow-md", "data-[state=open]:animate-zoom-in", "data-[state=closed]:animate-zoom-out", "data-[side=bottom]:animate-slide-in-from-top", "data-[side=left]:animate-slide-in-from-right", "data-[side=right]:animate-slide-in-from-left", "data-[side=top]:animate-slide-in-from-bottom", className),
+		className: twMerge("z-50 overflow-hidden rounded-md text-sm", "border border-border bg-popover text-popover-foreground", "px-3 py-1.5 shadow-md", "data-[state=open]:animate-zoom-in", "data-[state=closed]:animate-zoom-out", "data-[side=bottom]:animate-slide-in-from-top", "data-[side=left]:animate-slide-in-from-right", "data-[side=right]:animate-slide-in-from-left", "data-[side=top]:animate-slide-in-from-bottom", className),
 		children
 	});
 });

package/dist/ui/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["twMerge","Content","Portal","Provider","Root","Trigger","forwardRef","TooltipContent","children","className","props","ref","Tooltip","content","triggerAsChild","delayDuration","open","defaultOpen","onOpenChange","rest","undefined","TooltipProvider","TooltipRoot","TooltipTrigger"],"sources":["../../../../src/ui/components/tooltip/tooltip.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport type {\n  TooltipContentProps,\n  TooltipProps as TooltipPrimitiveProps,\n} from \"@radix-ui/react-tooltip\";\nimport {\n  Content,\n  Portal,\n  Provider,\n  Root,\n  Trigger,\n} from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\n\ninterface TooltipProps\n  extends TooltipPrimitiveProps, Omit<TooltipContentProps, \"content\"> {\n  content: React.ReactNode;\n  className?: string;\n  triggerAsChild?: boolean;\n}\n\nconst TooltipContent = forwardRef<\n  React.ElementRef<typeof Content>,\n  TooltipContentProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Content\n      ref={ref}\n      {...props}\n      className={twMerge(\n        // Base styles\n        \"z-50 overflow-hidden rounded-md text-sm\",\n        // Colors & Border\n        \"border border-gray-200 bg-gray-50 text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100\",\n        // Padding & Shadow\n        \"px-3 py-1.5 shadow-md\",\n        // Animations\n        \"data-[state=open]:animate-zoom-in\",\n        \"data-[state=closed]:animate-zoom-out\",\n        // Slide animations based on position\n        \"data-[side=bottom]:animate-slide-in-from-top\",\n        \"data-[side=left]:animate-slide-in-from-right\",\n        \"data-[side=right]:animate-slide-in-from-left\",\n        \"data-[side=top]:animate-slide-in-from-bottom\",\n        className,\n      )}\n    >\n      {children}\n    </Content>\n  );\n});\n\nconst Tooltip: React.FC<TooltipProps> = ({\n  content,\n  children,\n  triggerAsChild = false,\n  delayDuration = 0,\n  ...props\n}) => {\n  const { open, defaultOpen, onOpenChange, ...rest } = props;\n\n  return (\n    <Root\n      defaultOpen={defaultOpen}\n      delayDuration={delayDuration}\n      onOpenChange={onOpenChange}\n      open={open}\n    >\n      <Trigger\n        asChild={triggerAsChild}\n        type={triggerAsChild ? undefined : \"button\"} // Prevent form submission when default trigger is clicked\n      >\n        {children}\n      </Trigger>\n      <Portal>\n        <TooltipContent sideOffset={3} {...rest}>\n          {content}\n        </TooltipContent>\n      </Portal>\n    </Root>\n  );\n};\n\nexport {\n  Tooltip,\n  TooltipContent,\n  Provider as TooltipProvider,\n  Root as TooltipRoot,\n  Trigger as TooltipTrigger,\n  type TooltipProps,\n};\n"],"mappings":";;;;;AAqBA,MAAMO,iBAAiBD,4BAGpB,EAAEE,UAAUC,WAAW,GAAGC,SAASC,QAAQ;AAC5C,QACE,oBAAC,SAAD;EACOA;EACL,GAAID;EACJ,WAAWV,QAET,2CAEA,+GAEA,yBAEA,qCACA,wCAEA,gDACA,gDACA,gDACA,gDACAS,UACD;EAEAD;EACO,CAAA;EAEZ;AAEF,MAAMI,WAAmC,EACvCC,SACAL,UACAM,iBAAiB,OACjBC,gBAAgB,GAChB,GAAGL,YACC;CACJ,MAAM,EAAEM,MAAMC,aAAaC,cAAc,GAAGC,SAAST;AAErD,QACE,qBAAC,MAAD;EACeO;EACEF;EACDG;EACRF;YAJR,CAME,oBAAC,SAAD;GACE,SAASF;GACT,MAAMA,iBAAiBM,KAAAA,IAAY;GAElCZ;GACM,CAAA,EACT,oBAAC,QAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,YAAY;GAAG,GAAIW;aAChCN;GACa,CAAA,EACV,CAAA,CACH"}
+{"version":3,"file":"tooltip.js","names":["twMerge","Content","Portal","Provider","Root","Trigger","forwardRef","TooltipContent","children","className","props","ref","Tooltip","content","triggerAsChild","delayDuration","open","defaultOpen","onOpenChange","rest","undefined","TooltipProvider","TooltipRoot","TooltipTrigger"],"sources":["../../../../src/ui/components/tooltip/tooltip.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport type {\n  TooltipContentProps,\n  TooltipProps as TooltipPrimitiveProps,\n} from \"@radix-ui/react-tooltip\";\nimport {\n  Content,\n  Portal,\n  Provider,\n  Root,\n  Trigger,\n} from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\n\ninterface TooltipProps\n  extends TooltipPrimitiveProps, Omit<TooltipContentProps, \"content\"> {\n  content: React.ReactNode;\n  className?: string;\n  triggerAsChild?: boolean;\n}\n\nconst TooltipContent = forwardRef<\n  React.ElementRef<typeof Content>,\n  TooltipContentProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Content\n      ref={ref}\n      {...props}\n      className={twMerge(\n        // Base styles\n        \"z-50 overflow-hidden rounded-md text-sm\",\n        // Colors & Border\n        \"border border-border bg-popover text-popover-foreground\",\n        // Padding & Shadow\n        \"px-3 py-1.5 shadow-md\",\n        // Animations\n        \"data-[state=open]:animate-zoom-in\",\n        \"data-[state=closed]:animate-zoom-out\",\n        // Slide animations based on position\n        \"data-[side=bottom]:animate-slide-in-from-top\",\n        \"data-[side=left]:animate-slide-in-from-right\",\n        \"data-[side=right]:animate-slide-in-from-left\",\n        \"data-[side=top]:animate-slide-in-from-bottom\",\n        className,\n      )}\n    >\n      {children}\n    </Content>\n  );\n});\n\nconst Tooltip: React.FC<TooltipProps> = ({\n  content,\n  children,\n  triggerAsChild = false,\n  delayDuration = 0,\n  ...props\n}) => {\n  const { open, defaultOpen, onOpenChange, ...rest } = props;\n\n  return (\n    <Root\n      defaultOpen={defaultOpen}\n      delayDuration={delayDuration}\n      onOpenChange={onOpenChange}\n      open={open}\n    >\n      <Trigger\n        asChild={triggerAsChild}\n        type={triggerAsChild ? undefined : \"button\"} // Prevent form submission when default trigger is clicked\n      >\n        {children}\n      </Trigger>\n      <Portal>\n        <TooltipContent sideOffset={3} {...rest}>\n          {content}\n        </TooltipContent>\n      </Portal>\n    </Root>\n  );\n};\n\nexport {\n  Tooltip,\n  TooltipContent,\n  Provider as TooltipProvider,\n  Root as TooltipRoot,\n  Trigger as TooltipTrigger,\n  type TooltipProps,\n};\n"],"mappings":";;;;;AAqBA,MAAMO,iBAAiBD,4BAGpB,EAAEE,UAAUC,WAAW,GAAGC,SAASC,QAAQ;AAC5C,QACE,oBAAC,SAAD;EACOA;EACL,GAAID;EACJ,WAAWV,QAET,2CAEA,2DAEA,yBAEA,qCACA,wCAEA,gDACA,gDACA,gDACA,gDACAS,UACD;EAEAD;EACO,CAAA;EAEZ;AAEF,MAAMI,WAAmC,EACvCC,SACAL,UACAM,iBAAiB,OACjBC,gBAAgB,GAChB,GAAGL,YACC;CACJ,MAAM,EAAEM,MAAMC,aAAaC,cAAc,GAAGC,SAAST;AAErD,QACE,qBAAC,MAAD;EACeO;EACEF;EACDG;EACRF;YAJR,CAME,oBAAC,SAAD;GACE,SAASF;GACT,MAAMA,iBAAiBM,KAAAA,IAAY;GAElCZ;GACM,CAAA,EACT,oBAAC,QAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,YAAY;GAAG,GAAIW;aAChCN;GACa,CAAA,EACV,CAAA,CACH"}

package/dist/ui/index.d.ts

@@ -4,7 +4,7 @@ import { n as ButtonProps, r as buttonVariants, t as Button } from "../button-C8
 import { n as CharacterCounterProps, t as CharacterCounter } from "../character-counter-BWoglM2P.js";
 import { n as CheckboxValue, t as CheckboxBase } from "../checkbox-base-CZo-4eL0.js";
 import { n as CheckboxProps, t as Checkbox } from "../checkbox-CGBtXQnI.js";
-import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../command-DK7bdu7x.js";
+import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../command-B5BuEBfZ.js";
 import { n as RadioGroupFieldProps, t as RadioGroupField } from "../radio-group-field-BN654-SO.js";
 import { n as SelectFieldProps, r as SelectFieldRaw, t as SelectField } from "../select-field-C97QIhUL.js";
 import { n as EnumFieldProps, t as EnumField } from "../enum-field-Cct-i2Uz.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@powerhousedao/design-system",
-  "version": "6.2.0-dev.4",
-  "description": "",
+  "version": "6.2.0-dev.40",
+  "description": "Powerhouse document-engineering design system — GraphQL scalar UI components for building consistent Powerhouse editors.",
   "files": [
     "dist",
     "theme.css"
@@ -9,7 +9,8 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/powerhouse-inc/powerhouse"
+    "url": "https://github.com/powerhouse-inc/powerhouse",
+    "directory": "packages/design-system"
   },
   "publishConfig": {
     "access": "public"
@@ -64,7 +65,7 @@
   "bugs": {
     "url": "https://github.com/powerhouse-inc/design-system/issues"
   },
-  "homepage": "https://github.com/powerhouse-inc/design-system#readme",
+  "homepage": "https://academy.vetra.io/academy/Reference/EditorsUI/DocumentEngineering",
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-transform-react-pure-annotations": "^7.27.1",
@@ -107,9 +108,9 @@
     "tailwindcss": "4.2.2",
     "tsdown": "0.21.1",
     "tsx": "4.21.0",
-    "vite": "8.0.8",
+    "vite": "8.0.10",
     "vitest": "4.1.1",
-    "@powerhousedao/config": "6.2.0-dev.4"
+    "@powerhousedao/config": "6.2.0-dev.40"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -143,9 +144,23 @@
     "tailwind-merge": "3.4.0",
     "type-fest": "5.6.0",
     "usehooks-ts": "^3.1.1",
-    "@powerhousedao/reactor-browser": "6.2.0-dev.4",
-    "@powerhousedao/shared": "6.2.0-dev.4"
+    "@powerhousedao/shared": "6.2.0-dev.40",
+    "@powerhousedao/reactor-browser": "6.2.0-dev.40"
   },
+  "keywords": [
+    "powerhouse",
+    "vetra",
+    "document-model",
+    "local-first",
+    "event-sourcing",
+    "design-system",
+    "components",
+    "react",
+    "graphql",
+    "scalars",
+    "ui",
+    "editor"
+  ],
   "scripts": {
     "tsc": "tsc",
     "lint": "eslint",

package/theme.css

@@ -15,16 +15,6 @@
   --color-gray-700: hsl(189 5% 29%);
   --color-gray-800: hsl(200 4% 26%);
   --color-gray-900: hsl(192 5% 21%);
-  --color-gray-50: hsl(0 0% 99%);
-  --color-gray-100: hsl(0 0% 96%);
-  --color-gray-200: hsl(0 0% 94%);
-  --color-gray-300: hsl(210 3% 85%);
-  --color-gray-400: hsl(180 2% 78%);
-  --color-gray-500: hsl(200 2% 63%);
-  --color-gray-600: hsl(200 4% 44%);
-  --color-gray-700: hsl(189 5% 29%);
-  --color-gray-800: hsl(200 4% 26%);
-  --color-gray-900: hsl(192 5% 21%);
   --color-slate-50: hsl(210 20% 99%);
   --color-slate-100: hsl(210 20% 96%);
   --color-slate-200: hsl(210 9% 90%);
@@ -35,7 +25,8 @@
   --color-slate-700: hsl(204 9% 11%);
   --color-slate-800: hsl(195 9% 9%);
   --color-slate-900: hsl(195 6% 6%);
-  --color-blue-100: hsl(209 100% 99%);
+  --color-blue-50: hsl(209 100% 96%);
+  --color-blue-100: hsl(209 100% 89%);
   --color-blue-200: hsl(209 97% 85%);
   --color-blue-300: hsl(209 100% 80%);
   --color-blue-400: hsl(209 100% 75%);
@@ -44,7 +35,8 @@
   --color-blue-700: hsl(209 100% 60%);
   --color-blue-800: hsl(209 100% 55%);
   --color-blue-900: hsl(209 100% 50%);
-  --color-green-100: hsl(134 51% 99%);
+  --color-green-50: hsl(134 51% 96%);
+  --color-green-100: hsl(134 51% 89%);
   --color-green-200: hsl(135 52% 83%);
   --color-green-300: hsl(136 52% 77%);
   --color-green-400: hsl(136 53% 72%);
@@ -53,7 +45,8 @@
   --color-green-700: hsl(136 52% 55%);
   --color-green-800: hsl(136 53% 49%);
   --color-green-900: hsl(136 53% 43%);
-  --color-purple-100: hsl(262 79% 99%);
+  --color-purple-50: hsl(262 79% 96%);
+  --color-purple-100: hsl(262 79% 89%);
   --color-purple-200: hsl(263 79% 89%);
   --color-purple-300: hsl(263 79% 85%);
   --color-purple-400: hsl(264 77% 81%);
@@ -62,7 +55,8 @@
   --color-purple-700: hsl(263 78% 70%);
   --color-purple-800: hsl(263 78% 66%);
   --color-purple-900: hsl(263 78% 63%);
-  --color-red-100: hsl(3 82% 99%);
+  --color-red-50: hsl(3 82% 96%);
+  --color-red-100: hsl(3 82% 89%);
   --color-red-200: hsl(3 82% 91%);
   --color-red-300: hsl(6 82% 87%);
   --color-red-400: hsl(5 82% 83%);
@@ -71,7 +65,8 @@
   --color-red-700: hsl(4 81% 69%);
   --color-red-800: hsl(5 81% 61%);
   --color-red-900: hsl(5 81% 56%);
-  --color-orange-100: hsl(33 100% 99%);
+  --color-orange-50: hsl(33 100% 96%);
+  --color-orange-100: hsl(33 100% 89%);
   --color-orange-200: hsl(32 100% 85%);
   --color-orange-300: hsl(32 100% 80%);
   --color-orange-400: hsl(32 100% 75%);
@@ -80,7 +75,8 @@
   --color-orange-700: hsl(32 100% 60%);
   --color-orange-800: hsl(33 100% 55%);
   --color-orange-900: hsl(32 100% 50%);
-  --color-yellow-100: hsl(46 100% 99%);
+  --color-yellow-50: hsl(46 100% 96%);
+  --color-yellow-100: hsl(46 100% 89%);
   --color-yellow-200: hsl(47 100% 86%);
   --color-yellow-300: hsl(47 100% 79%);
   --color-yellow-400: hsl(47 100% 69%);
@@ -89,7 +85,8 @@
   --color-yellow-700: hsl(47 100% 51%);
   --color-yellow-800: hsl(47 100% 50%);
   --color-yellow-900: hsl(47 100% 49%);
-  --color-charcoal-100: hsl(214 16% 99%);
+  --color-charcoal-50: hsl(214 16% 96%);
+  --color-charcoal-100: hsl(214 16% 89%);
   --color-charcoal-200: hsl(219 17% 84%);
   --color-charcoal-300: hsl(221 17% 67%);
   --color-charcoal-400: hsl(17 17% 58%);
@@ -229,3 +226,134 @@
     }
   }
 }
+
+:root {
+  --background: var(--color-gray-50);
+  --foreground: var(--color-gray-800);
+  --card: var(--color-white);
+  --card-foreground: var(--color-gray-800);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-gray-800);
+  --primary: var(--color-gray-800);
+  --primary-foreground: var(--color-white);
+  --secondary: var(--color-gray-200);
+  --secondary-foreground: var(--color-gray-700);
+  --muted: var(--color-gray-100);
+  --muted-foreground: var(--color-gray-500);
+  --accent: var(--color-gray-100);
+  --accent-foreground: var(--color-gray-800);
+  --border: var(--color-gray-200);
+  --input: var(--color-gray-200);
+  --ring: var(--color-blue-500);
+  --hover: 0.95;
+  --active: 0.9;
+  --disabled: 0.5;
+
+  --destructive: var(--color-red-900);
+  --destructive-foreground: var(--color-white);
+  --info: var(--color-blue-900);
+  --info-foreground: var(--color-white);
+  --success: var(--color-green-900);
+  --success-foreground: var(--color-white);
+  --warning: var(--color-orange-900);
+  --warning-foreground: var(--color-white);
+
+  --chart-1: var(--color-blue-600);
+  --chart-2: var(--color-green-600);
+  --chart-3: var(--color-orange-600);
+  --chart-4: var(--color-purple-600);
+  --chart-5: var(--color-red-600);
+
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.dark {
+  --background: var(--color-slate-800);
+  --foreground: var(--color-slate-100);
+  --card: var(--color-slate-700);
+  --card-foreground: var(--color-slate-100);
+  --popover: var(--color-slate-700);
+  --popover-foreground: var(--color-slate-100);
+  --primary: var(--color-slate-100);
+  --primary-foreground: var(--color-slate-900);
+  --secondary: var(--color-slate-600);
+  --secondary-foreground: var(--color-slate-100);
+  --muted: var(--color-slate-700);
+  --muted-foreground: var(--color-slate-300);
+  --accent: var(--color-slate-700);
+  --accent-foreground: var(--color-slate-100);
+  --border: var(--color-slate-500);
+  --input: var(--color-slate-500);
+  --hover: 1.25;
+  --active: 1.4;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@utility hover-effect {
+  filter: brightness(var(--hover));
+  transition: filter 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+@utility active-effect {
+  filter: brightness(var(--active));
+  transition: filter 0.1s ease-in-out;
+}
+
+@utility disabled-effect {
+  cursor: not-allowed;
+  opacity: var(--disabled);
+  filter: grayscale(1);
+  outline: none;
+  box-shadow: none;
+}