feat: sync WRNexusJS component showcase 0.5.0

app/styles/global.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @plugin "@iconify/tailwind4";
 @source "../**/*.wrn";
-@source "../../../packages/ui/components/*.wrn";
+@source "../../node_modules/@wrnexus/ui/components/*.wrn";
 
 :root {
   color-scheme: light dark;
@@ -986,6 +986,10 @@ html[data-design-panel-open] .design-panel {
 }
 
 .docs-directory-group > div > a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
   overflow: hidden;
   padding: 0.42rem 0.55rem;
   border-radius: 0.45rem;
@@ -997,6 +1001,34 @@ html[data-design-panel-open] .design-panel {
   white-space: nowrap;
 }
 
+.docs-directory-group > div > a > [data-docs-component-name] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.docs-directory-group [data-component-status] {
+  flex: 0 0 auto;
+  padding: 0.08rem 0.32rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  font-size: 0.5rem;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+  line-height: 1.25;
+}
+
+.docs-directory-group [data-component-status="complete"] {
+  color: var(--wire-color-success);
+}
+
+.docs-directory-group [data-component-status="pending"] {
+  color: var(--wire-color-muted);
+}
+
+.docs-directory-group [data-component-status="working"] {
+  color: var(--wire-color-warning);
+}
+
 .docs-directory-group > div > a:hover,
 .docs-directory-group > div > a[aria-current="page"] {
   color: var(--wire-color-text);
@@ -2287,6 +2319,19 @@ body {
   color: var(--wire-color-primary);
 }
 
+.detail-toc-group {
+  margin-top: 0.35rem;
+  color: var(--wire-color-text);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.detail-toc-group + a,
+.detail-toc-group + a + a,
+.detail-toc-group + a + a + a {
+  padding-inline-start: 0.75rem;
+}
+
 .docs-table-wrap {
   overflow: auto;
   border: 1px solid var(--wire-color-border);