@axzydev/axzy_ui_system 1.7.0 → 1.7.2

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -33,6 +33,8 @@
     "build:app": "tsc -b && vite build -c vite.app.config.ts",
     "build:css": "node scripts/build-css.mjs",
     "lint": "eslint . && node scripts/check-atomic-deps.mjs && node scripts/check-css-isolation.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "check:atomic": "node scripts/check-atomic-deps.mjs",
     "check:css": "node scripts/check-css-isolation.mjs",
     "preview": "vite preview",
@@ -44,7 +46,8 @@
     "ext:package": "node vscode-extension/esbuild.mjs && cd vscode-extension && npx --yes @vscode/vsce package --no-dependencies",
     "audit:sandbox": "node scripts/audit-sandbox.mjs",
     "docs:llm": "pnpm ext:catalog && node scripts/build-llm-docs.mjs && node scripts/build-ai-bundle.mjs",
-    "docs:ai": "node scripts/build-ai-bundle.mjs"
+    "docs:ai": "node scripts/build-ai-bundle.mjs",
+    "docs:json-renderer": "node scripts/build-json-renderer-docs.mjs"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -61,22 +64,26 @@
   },
   "devDependencies": {
     "@eslint/js": "9.19.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^22.13.1",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
+    "@types/vscode": "1.85.0",
     "@vitejs/plugin-react-swc": "3.8.0",
+    "esbuild": "^0.25.0",
     "eslint": "9.19.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-react-refresh": "0.4.18",
     "globals": "15.14.0",
+    "jsdom": "^26.1.0",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.6",
     "typescript": "~5.7.2",
     "typescript-eslint": "8.22.0",
     "vite": "6.1.0",
-    "@tailwindcss/vite": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "tsup": "^8.3.6",
     "vite-plugin-dts": "^4.5.0",
-    "@types/vscode": "1.85.0",
-    "esbuild": "^0.25.0"
+    "vitest": "^3.2.7"
   }
 }

package/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { ITLayout, ITThemeProvider, ITI18nProvider, useITTranslation, useDebouncedSearch } from "./index";
+import { DEFAULT_AXZY_CONFIG, mergeAxzyConfig, type AxzyConfig } from "./sandbox/axzyConfig";
 import type { ITNavigationItem } from "./index";
 
 // Import Showcases
@@ -67,6 +68,9 @@ import {
 } from "./showcases/FeedbackShowcases";
 import JsonRendererShowcase from "./showcases/JsonRendererShowcase";
 import JsonEditorShowcase from "./showcases/JsonEditorShowcase";
+import JsonScreenShowcase from "./showcases/JsonScreenShowcase";
+import DemoJsonPortfolio from "./showcases/DemoJsonPortfolio";
+import DemoJsonDashboard, { DEMO_APP_PAGES, type DemoAppPage } from "./showcases/DemoJsonDashboard";
 
 // Sandbox routing / landing (dev-only, never published)
 import {
@@ -90,7 +94,15 @@ import { GROUP_ICONS } from "./sandbox/icons";
  */
 function AppShell() {
   const { t } = useITTranslation();
-  const { route, goToItem, goToLanding, goToPortfolio } = useHashRoute();
+  const { route, goToItem, goToLanding, goToPortfolio, goToDemo } = useHashRoute();
+  // Configuración global del sandbox: `public/axzy.json`.
+  const [configGlobal, setConfigGlobal] = useState<AxzyConfig>(DEFAULT_AXZY_CONFIG);
+  useEffect(() => {
+    fetch("/axzy.json")
+      .then((r) => r.json())
+      .then((json: unknown) => setConfigGlobal(mergeAxzyConfig(json)))
+      .catch(() => setConfigGlobal(DEFAULT_AXZY_CONFIG));
+  }, []);
   const [subitemConnector] = useState<"dot" | "|" | "none">("dot");
 
   // Debounced term drives filtering; `searchValue` is the live input value.
@@ -208,10 +220,16 @@ function AppShell() {
         label: t("sandbox.nav.portfolio"),
         action: () => goToPortfolio(),
       },
+      {
+        id: "demo",
+        label: t("sandbox.nav.demo"),
+        action: () => goToDemo(),
+      },
     ],
     onNavItemClick: (id: string) => {
       if (id === "ui-system") goToLanding();
       else if (id === "portfolio") goToPortfolio();
+      else if (id === "demo") goToDemo();
     },
     // Sin `userMenu`: el sandbox no tiene sesión. Antes mostraba un usuario
     // inventado ("Alex Dev / alex@axzy.dev") en un portafolio real.
@@ -319,6 +337,8 @@ function AppShell() {
         return <JsonRendererShowcase />;
       case "jsoneditor":
         return <JsonEditorShowcase />;
+      case "jsonscreen":
+        return <JsonScreenShowcase />;
       default:
         return (
           <NotFoundShowcase
@@ -331,7 +351,14 @@ function AppShell() {
   };
 
   return (
-    <ITThemeProvider showFab={false} density={0.98} radius={10} shadow={2}>
+    <ITThemeProvider
+      showFab={configGlobal.showFab}
+      density={configGlobal.density}
+      radius={configGlobal.radius}
+      shadow={configGlobal.shadow}
+      appearance={configGlobal.appearance}
+      theme={configGlobal.theme}
+    >
         {route.view === "producto" ? (
           <div className="min-h-[100dvh] bg-[#fafafa] dark:bg-[#0b0d10]">
             {route.valid ? (
@@ -347,6 +374,37 @@ function AppShell() {
               />
             )}
           </div>
+        ) : route.view === "demo" ? (
+          route.group === "app" ? (
+            <DemoJsonDashboard
+              page={(DEMO_APP_PAGES.includes((route.item ?? "inicio") as DemoAppPage)
+                ? route.item
+                : "inicio") as DemoAppPage}
+              onNavigate={(pagina) => {
+                window.location.hash = `#demo/app/${pagina}`;
+              }}
+              onExit={() => {
+                window.location.hash = "#demo";
+              }}
+              filterEstado={route.query.estado ?? "Todos"}
+              onFilterChange={(estado) => {
+                const base = `#demo/app/${route.item ?? "inicio"}`;
+                window.location.hash = estado === "Todos" ? base : `${base}?estado=${encodeURIComponent(estado)}`;
+              }}
+            />
+          ) : (
+            <div className="min-h-[100dvh] bg-[#fafafa] dark:bg-[#0b0d10]">
+              <DemoJsonPortfolio
+                onBack={() => goToLanding()}
+                onOpenProject={(id) => {
+                  window.location.hash = `#proyecto/${id}`;
+                }}
+                onOpenPanel={() => {
+                  window.location.hash = "#demo/app/inicio";
+                }}
+              />
+            </div>
+          )
         ) : route.view === "home" ? (
           <div className="min-h-[100dvh] bg-[#fafafa] dark:bg-[#0b0d10]">
             <HomeShowcase />

package/src/components/atoms/image/image.props.ts

@@ -7,6 +7,8 @@ export interface ITImageProps {
   className?: string;
   /** Fallback image URL shown when the primary `src` fails to load */
   fallback?: string;
+  /** How the image fills its box: "cover" crops to fill (default), "contain" shows the whole image */
+  fit?: "cover" | "contain";
   /** Click handler */
   onClick?: () => void;
 }

package/src/components/atoms/image/image.tsx

@@ -26,6 +26,7 @@ const ITImage = ({
   alt,
   className = "",
   fallback = "",
+  fit = "cover",
 }: ITImageProps) => {
   const [imageError, setImageError] = useState(false);
   const { t } = useITTranslation();
@@ -42,14 +43,14 @@ const ITImage = ({
         <img
           src={fallback}
           alt={t("image.fallbackAlt")}
-          className="w-full h-full object-cover"
+          className="w-full h-full" style={{ objectFit: fit }}
         />
       ) : (
         <img
           src={src}
           alt={alt}
           onError={handleImageError}
-          className="w-full h-full object-cover"
+          className="w-full h-full" style={{ objectFit: fit }}
         />
       )}
     </div>

package/src/components/atoms/segmented-control/segmented-control.tsx

@@ -34,6 +34,7 @@ export default function ITSegmentedControl({
 
   return (
     <div
+      role="group"
       className={clsx(
         "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
@@ -46,6 +47,8 @@ export default function ITSegmentedControl({
         return (
           <button
             key={opt.value}
+            type="button"
+            aria-pressed={isActive}
             onClick={() => !disabled && onChange(opt.value)}
             disabled={disabled}
             className={clsx(

package/src/components/molecules/card/card.tsx

@@ -73,6 +73,18 @@ export default function ITCard({
       onClick={onClick}
       onMouseEnter={() => onClick && setIsHovered(true)}
       onMouseLeave={() => onClick && setIsHovered(false)}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
       className={clsx("overflow-hidden flex flex-col", className)}
       style={containerStyle}
     >

package/src/components/molecules/stat-card/stat-card.tsx

@@ -36,6 +36,16 @@ export default function ITStatCard({
       onClick={onClick}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : undefined}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
     >
       <div className="flex items-start justify-between mb-1">
         <ITText as="span" className="text-xs font-medium text-slate-400 dark:text-slate-500">{label}</ITText>

package/src/components/organisms/dialog/dialog.props.ts

@@ -11,6 +11,8 @@ export interface ITDialogProps {
   title?: string;
   /** When true and `title` is provided, renders an ITFormHeader instead of the default title bar. @default false */
   useFormHeader?: boolean;
+  /** When false, the card has no padding: the title row and body are flush to the edges, so the content can draw its own sections. @default true */
+  padded?: boolean;
   /** Makes the dialog fill the entire viewport. @default false */
   fullScreen?: boolean;
 }

package/src/components/organisms/dialog/dialog.tsx

@@ -42,6 +42,7 @@ export default function ITDialog({
   title,
   useFormHeader = false,
   fullScreen = false,
+  padded = true,
 }: ITDialogProps) {
   const { t } = useITTranslation();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -79,7 +80,7 @@ export default function ITDialog({
         className={`overflow-hidden relative ${
           fullScreen
             ? "w-screen h-screen max-w-none rounded-none m-0 flex flex-col"
-            : `${className || ""} ${useFormHeader ? "p-0" : "p-6"}`
+            : `${className || ""} ${!padded || useFormHeader ? "p-0" : "p-6"}`
         }`}
         style={{
              backgroundColor: theme.card.backgroundColor,
@@ -106,8 +107,8 @@ export default function ITDialog({
             >
               <FaRegTimesCircle />
             </button>
-            {title && <ITText as="h2" className="text-xl font-semibold mb-4">{title}</ITText>}
-            <div>{children}</div>
+            {title && (padded ? <ITText as="h2" className="text-xl font-semibold mb-4">{title}</ITText> : <div className="flex items-center justify-between gap-3 px-6 py-4 border-b border-slate-200"><ITText as="h2" className="text-lg font-medium">{title}</ITText></div>)}
+            <div className={padded ? undefined : "min-h-0 flex-1 flex flex-col"}>{children}</div>
           </>
         )}
       </div>

package/src/dev.css

@@ -31,6 +31,12 @@
   --default-font-family: var(--font-sans);
 }
 
+/* El portafolio de demostración vive en `public/demo/*.json` y sus clases
+   viajan en el JSON. Tailwind solo genera las clases que ve en el código, así
+   que hay que apuntarlo al archivo del esquema: el demo es dev-only y estas
+   utilidades no entran en `dist/index.css`. */
+@source "../public/demo/*.json";
+
 /* ──────────────────────────────────────────────
    SANDBOX-ONLY ANIMATIONS (dev.css)
    Never shipped: only src/main.tsx imports this file and `pnpm bundle`

package/src/index.ts

@@ -66,6 +66,80 @@ import ITWysiwyg from "./components/molecules/wysiwyg/wysiwyg";
 import ITJsonRenderer from "./components/molecules/json-renderer/json-renderer";
 import ITJSONEditor from "./components/molecules/json-editor/json-editor";
 
+// MOTOR DE PANTALLAS DECLARATIVAS (json-renderer)
+import {
+  ITSchemaRenderer,
+  NodeBoundary,
+  renderNode,
+  auditTree,
+  countPendingNodes,
+  axzyCatalog,
+  axzyCatalogTypes,
+  AXZY_CATALOG_ENTRIES,
+  AXZY_EXCLUDED_TYPES,
+  createCatalog,
+  getCatalogEntry,
+  isExcludedType,
+  getExclusionReason,
+  GLOBALLY_FORBIDDEN_PROPS,
+  resolveNode,
+  parsePartialSchema,
+  isNodePending,
+  JsonEngineError,
+  issue,
+  formatPath,
+  parsePath,
+  readPath,
+  hasPath,
+  pushPath,
+  propPath,
+  DEFAULT_LIMITS,
+  resolveLimits,
+  createLimitTracker,
+  validateSchema,
+  CURRENT_SCHEMA_VERSION,
+  migrateSchema,
+  DEFAULT_MIGRATIONS,
+  buildVocabularyContract,
+  formatVocabularyForPrompt,
+} from "./json-renderer";
+import type {
+  ITJsonRenderEngineProps,
+  ScreenSchema,
+  NodeSchema,
+  SchemaValue,
+  SchemaReference,
+  WhenSchema,
+  ActionSchema,
+  EffectSchema,
+  DataSourceSchema,
+  NodeStatus,
+  Catalog,
+  CatalogEntry,
+  PropSpec,
+  PropKind,
+  ResolvedNode,
+  UnresolvedNode,
+  PartialParseResult,
+  StreamState,
+  JsonEngineIssue,
+  JsonEngineCode,
+  JsonEngineSeverity,
+  SchemaPath,
+  PathSegment,
+  EngineLimits,
+  LimitTracker,
+  ValidationReport,
+  ValidationVerdict,
+  ValidateOptions,
+  SchemaMigration,
+  MigrationRegistry,
+  MigrationResult,
+  VocabularyContract,
+  ComponentContract,
+  PropContract,
+} from "./json-renderer";
+
 // PROPS
 import type { ITAlertProps } from "./components/molecules/alert/alert.props";
 import type { ITAvatarProps } from "./components/atoms/avatar/avatar.props";
@@ -168,7 +242,16 @@ export {
   UploadStatus, FileTypeEnum,
   getContrastTextColor, isLightColor, resolveCssColor,
   ITI18nProvider, useITTranslation, esMessages, enMessages,
-  ITJsonRenderer, ITJSONEditor
+  ITJsonRenderer, ITJSONEditor,
+  // Motor de pantallas declarativas
+  ITSchemaRenderer, NodeBoundary, renderNode, auditTree, countPendingNodes,
+  axzyCatalog, axzyCatalogTypes, AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES,
+  createCatalog, getCatalogEntry, isExcludedType, getExclusionReason, GLOBALLY_FORBIDDEN_PROPS,
+  resolveNode, parsePartialSchema, isNodePending,
+  JsonEngineError, issue, formatPath, parsePath, readPath, hasPath, pushPath, propPath,
+  DEFAULT_LIMITS, resolveLimits, createLimitTracker,
+  validateSchema, CURRENT_SCHEMA_VERSION, migrateSchema, DEFAULT_MIGRATIONS,
+  buildVocabularyContract, formatVocabularyForPrompt,
 };
 
   export type {
@@ -203,6 +286,12 @@ export {
     ITWysiwygProps,
     ITJsonRendererProps, JsonComponentNode, JsonComponentType,
     ITJSONEditorProps,
+    ITJsonRenderEngineProps, ScreenSchema, NodeSchema, SchemaValue, SchemaReference, WhenSchema,
+    ActionSchema, EffectSchema, DataSourceSchema, NodeStatus, Catalog, CatalogEntry, PropSpec, PropKind,
+    ResolvedNode, UnresolvedNode, PartialParseResult, StreamState, JsonEngineIssue, JsonEngineCode,
+    JsonEngineSeverity, SchemaPath, PathSegment, EngineLimits, LimitTracker,
+    ValidationReport, ValidationVerdict, ValidateOptions, SchemaMigration, MigrationRegistry, MigrationResult,
+    VocabularyContract, ComponentContract, PropContract,
     UseTableStateOptions, UseTableStateResult
   };