@axzydev/axzy_ui_system 1.7.2 → 1.7.4

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -47,7 +47,8 @@
     "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:json-renderer": "node scripts/build-json-renderer-docs.mjs"
+    "docs:json-renderer": "node scripts/build-json-renderer-docs.mjs",
+    "schema:check": "node scripts/json-renderer/check.mjs"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -72,6 +73,7 @@
     "@types/react-dom": "19.0.3",
     "@types/vscode": "1.85.0",
     "@vitejs/plugin-react-swc": "3.8.0",
+    "ajv": "8.18.0",
     "esbuild": "^0.25.0",
     "eslint": "9.19.0",
     "eslint-plugin-react-hooks": "5.0.0",

package/src/App.tsx

@@ -70,7 +70,7 @@ 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";
+import DemoJsonDashboard from "./showcases/DemoJsonDashboard";
 
 // Sandbox routing / landing (dev-only, never published)
 import {
@@ -377,18 +377,16 @@ function AppShell() {
         ) : 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}`;
+              path={`/${route.item || "inicio"}`}
+              query={route.query}
+              onNavigate={(href) => {
+                window.location.hash = `#demo/app${href}`;
               }}
               onExit={() => {
                 window.location.hash = "#demo";
               }}
-              filterEstado={route.query.estado ?? "Todos"}
               onFilterChange={(estado) => {
-                const base = `#demo/app/${route.item ?? "inicio"}`;
+                const base = `#demo/app/${route.item || "inicio"}`;
                 window.location.hash = estado === "Todos" ? base : `${base}?estado=${encodeURIComponent(estado)}`;
               }}
             />

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

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ElementType } from "react";
+import { ReactNode, CSSProperties, ElementType, UIEvent } from "react";
 
 export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
 export type FlexAlign = "start" | "end" | "center" | "stretch" | "baseline";
@@ -32,4 +32,6 @@ export interface ITFlexProps {
   as?: ElementType;
   /** Click handler */
   onClick?: (e: React.MouseEvent) => void;
+  /** Scroll handler (useful for scrollable chat/log panels) */
+  onScroll?: (e: UIEvent<HTMLElement>) => void;
 }

package/src/components/atoms/flex/flex.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { forwardRef } from "react";
 import {
   ITFlexProps,
   FlexDirection,
@@ -52,7 +53,7 @@ const wrapMap: Record<FlexWrap, string> = {
  *   <main>Content</main>
  * </ITFlex>
  */
-export default function ITFlex({
+const ITFlex = forwardRef<HTMLDivElement, ITFlexProps>(function ITFlex({
   children,
   direction = "row",
   align,
@@ -66,7 +67,8 @@ export default function ITFlex({
   style,
   as: Component = "div",
   onClick,
-}: ITFlexProps) {
+  onScroll,
+}, ref) {
   const resolvedStyle: React.CSSProperties = {
     gap: gap > 0 ? `${gap * 0.25}rem` : undefined,
     flexGrow: typeof grow === "boolean" ? (grow ? 1 : 0) : grow,
@@ -77,6 +79,7 @@ export default function ITFlex({
 
   return (
     <Component
+      ref={ref}
       className={clsx(
         "flex",
         directionMap[direction],
@@ -87,8 +90,13 @@ export default function ITFlex({
       )}
       style={resolvedStyle}
       onClick={onClick}
+      onScroll={onScroll}
     >
       {children}
     </Component>
   );
-}
+});
+
+ITFlex.displayName = "ITFlex";
+
+export default ITFlex;

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

@@ -21,4 +21,8 @@ export interface ITTextareaProps {
   maxLength?: number;
   /** Resize behavior of the textarea: "none" | "vertical" | "horizontal" | "both". */
   resize?: "none" | "vertical" | "horizontal" | "both";
+  /** Keydown handler (e.g. Enter to send in a chat composer). */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  /** Autofocus the textarea. */
+  autoFocus?: boolean;
 }

package/src/components/atoms/textarea/textarea.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { ITTextareaProps } from "./textarea.props";
 import { inputLabel, inputError } from "@/utils/styles";
 import ITText from "@/components/atoms/text/text";
@@ -26,7 +27,7 @@ const resizeMap = {
  *   error={bio.length > 500 ? "Max 500 characters" : undefined}
  * />
  */
-export default function ITTextarea({
+const ITTextarea = forwardRef<HTMLTextAreaElement, ITTextareaProps>(function ITTextarea({
   value,
   onChange,
   label,
@@ -38,7 +39,9 @@ export default function ITTextarea({
   name,
   maxLength,
   resize = "vertical",
-}: ITTextareaProps) {
+  onKeyDown,
+  autoFocus = false,
+}, ref) {
   return (
     <div className={clsx("flex flex-col gap-1.5", className)}>
       {label && (
@@ -47,6 +50,7 @@ export default function ITTextarea({
         </ITText>
       )}
       <textarea
+        ref={ref}
         id={name}
         name={name}
         value={value}
@@ -55,6 +59,8 @@ export default function ITTextarea({
         rows={rows}
         disabled={disabled}
         maxLength={maxLength}
+        onKeyDown={onKeyDown}
+        autoFocus={autoFocus}
         className={clsx(
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
@@ -68,4 +74,8 @@ export default function ITTextarea({
       {error && <ITText as="span" className={inputError}>{error}</ITText>}
     </div>
   );
-}
+});
+
+ITTextarea.displayName = "ITTextarea";
+
+export default ITTextarea;

package/src/components/molecules/card/card.props.ts

@@ -3,6 +3,8 @@ export interface ITCardProps {
   onClick?: () => void;
   /** Card title displayed in the header area. */
   title?: string;
+  /** Optional actions rendered at the right of the title row (e.g. a play button). */
+  headerActions?: React.ReactNode;
   /** Image source URL displayed at the top of the card. */
   image?: string;
   /** Alt text for the card image. @default "Card Image" */

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

@@ -20,6 +20,7 @@ import { useITTranslation } from "@/i18n";
  */
 export default function ITCard({
   title,
+  headerActions,
   image,
   alt,
   children,
@@ -97,14 +98,26 @@ export default function ITCard({
       )}
 
       <div className={clsx(contentClassName)} style={bodyStyle}>
-        {title && (
+        {headerActions ? (
+          <div className="mb-2 flex items-center justify-between gap-3">
+            {title && (
+              <ITText
+                as="h3"
+                className={clsx(flat ? "text-base font-semibold" : "text-xl font-semibold", titleClassName)}
+              >
+                {title}
+              </ITText>
+            )}
+            {headerActions}
+          </div>
+        ) : title ? (
           <ITText
             as="h3"
             className={clsx(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName)}
           >
             {title}
           </ITText>
-        )}
+        ) : null}
         <ITText as="div" className="text-secondary-600">{children}</ITText>
       </div>
       {actions && (

package/src/components/molecules/line-bar-chart/line-bar-chart.props.ts

@@ -19,6 +19,10 @@ export interface ITLineBarChartProps {
   lineColor?: string;
   /** Color de las barras. */
   barColor?: string;
+  /** Muestra la serie de línea. @default true */
+  showLine?: boolean;
+  /** Muestra la serie de barras. @default true */
+  showBars?: boolean;
   height?: number;
   /** Formatea los valores del tooltip; por defecto número con separadores. */
   formatValue?: (value: number) => string;

package/src/components/molecules/line-bar-chart/line-bar-chart.tsx

@@ -16,6 +16,8 @@ export function ITLineBarChart({
   barLabel,
   lineColor = "#10b981",
   barColor = "#3b82f6",
+  showLine = true,
+  showBars = true,
   height = 240,
   formatValue,
   formatAxis,
@@ -40,8 +42,12 @@ export function ITLineBarChart({
   const plotHeight = height - padding.top - padding.bottom;
 
   const max = useMemo(
-    () => Math.max(...data.flatMap((d) => [d.line, d.bar]), 1),
-    [data]
+    () =>
+      Math.max(
+        ...data.flatMap((d) => [showLine ? d.line : 0, showBars ? d.bar : 0]),
+        1
+      ),
+    [data, showLine, showBars]
   );
   const gridValues = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
   const step = data.length > 0 ? plotWidth / data.length : plotWidth;
@@ -103,21 +109,22 @@ export function ITLineBarChart({
           </g>
         ))}
 
-        {data.map((d, i) => (
-          <rect
-            key={`bar-${d.label}`}
-            x={x(i) - barWidth / 2}
-            y={y(d.bar)}
-            width={barWidth}
-            height={Math.max(padding.top + plotHeight - y(d.bar), 1)}
-            rx={3}
-            fill={barColor}
-            opacity={hover === null || hover === i ? 0.85 : 0.35}
-          />
-        ))}
+        {showBars &&
+          data.map((d, i) => (
+            <rect
+              key={`bar-${d.label}`}
+              x={x(i) - barWidth / 2}
+              y={y(d.bar)}
+              width={barWidth}
+              height={Math.max(padding.top + plotHeight - y(d.bar), 1)}
+              rx={3}
+              fill={barColor}
+              opacity={hover === null || hover === i ? 0.85 : 0.35}
+            />
+          ))}
 
-        {areaPath && <path d={areaPath} fill={`url(#area-${gradientId})`} />}
-        {data.length > 0 && (
+        {showLine && areaPath && <path d={areaPath} fill={`url(#area-${gradientId})`} />}
+        {showLine && data.length > 0 && (
           <polyline
             points={linePoints}
             fill="none"
@@ -127,17 +134,18 @@ export function ITLineBarChart({
             strokeLinejoin="round"
           />
         )}
-        {data.map((d, i) => (
-          <circle
-            key={`dot-${d.label}`}
-            cx={x(i)}
-            cy={y(d.line)}
-            r={hover === i ? 4.5 : 3}
-            fill="#ffffff"
-            stroke={lineColor}
-            strokeWidth={2}
-          />
-        ))}
+        {showLine &&
+          data.map((d, i) => (
+            <circle
+              key={`dot-${d.label}`}
+              cx={x(i)}
+              cy={y(d.line)}
+              r={hover === i ? 4.5 : 3}
+              fill="#ffffff"
+              stroke={lineColor}
+              strokeWidth={2}
+            />
+          ))}
 
         {data.map((d, i) => (
           <g key={`hit-${d.label}`} onMouseEnter={() => setHover(i)}>
@@ -157,24 +165,32 @@ export function ITLineBarChart({
           role="status"
         >
           <p className="text-[10px] font-semibold" style={{ color: "#e2e8f0" }}>{active.label}</p>
-          <p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
-            {resolvedLineLabel}: {resolvedFormatValue(active.line)}
-          </p>
-          <p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
-            {resolvedBarLabel}: {resolvedFormatValue(active.bar)}
-          </p>
+          {showLine && (
+            <p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
+              {resolvedLineLabel}: {resolvedFormatValue(active.line)}
+            </p>
+          )}
+          {showBars && (
+            <p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
+              {resolvedBarLabel}: {resolvedFormatValue(active.bar)}
+            </p>
+          )}
         </div>
       )}
 
       <ul className="flex flex-wrap items-center gap-4 text-[11px]" style={{ color: "#475569" }}>
-        <li>
-          <span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />
-          {resolvedLineLabel}
-        </li>
-        <li>
-          <span className="h-2.5 w-2.5 rounded-sm" style={{ background: barColor }} aria-hidden />
-          {resolvedBarLabel}
-        </li>
+        {showLine && (
+          <li>
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />
+            {resolvedLineLabel}
+          </li>
+        )}
+        {showBars && (
+          <li>
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ background: barColor }} aria-hidden />
+            {resolvedBarLabel}
+          </li>
+        )}
       </ul>
     </div>
   );

package/src/components/molecules/stat-card/stat-card.props.ts

@@ -1,4 +1,5 @@
 import { ReactNode, CSSProperties } from "react";
+import { ColorsTypes } from "@/types/colors.types";
 
 export interface ITStatCardProps {
   /** The metric label displayed above the value. */
@@ -7,6 +8,12 @@ export interface ITStatCardProps {
   value: string | number;
   /** Optional trend indicator text (e.g. "+12%", "-3"). */
   trend?: string;
+  /** Optional secondary line under the value (context, not a trend). */
+  hint?: string;
+  /** Optional progress 0–100 rendered under the hint. */
+  progress?: number;
+  /** Semantic color for the progress bar. @default "primary" */
+  progressColor?: ColorsTypes;
   /** Direction of the trend, used to color the trend badge. */
   trendDirection?: "up" | "down" | "neutral";
   /** Icon element rendered next to the label in the top-right corner. */

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ITStatCardProps } from "./stat-card.props";
 import ITText from "@/components/atoms/text/text";
+import ITProgress from "@/components/atoms/progress/progress";
 
 const trendColors = {
   up: "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30",
@@ -23,6 +24,9 @@ export default function ITStatCard({
   value,
   trend,
   trendDirection = trend && trend.startsWith("-") ? "down" : "neutral",
+  hint,
+  progress,
+  progressColor = "primary",
   icon,
   color = "bg-primary-50 dark:bg-primary-950/20",
   className,
@@ -59,6 +63,20 @@ export default function ITStatCard({
           </ITText>
         )}
       </div>
+      {hint && (
+        <ITText as="p" className="mt-1 text-[11px] leading-snug text-slate-500 dark:text-slate-400">
+          {hint}
+        </ITText>
+      )}
+      {progress !== undefined && (
+        <ITProgress
+          value={progress}
+          max={100}
+          color={progressColor}
+          size="sm"
+          className="mt-2"
+        />
+      )}
     </div>
   );
 }

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

@@ -28,8 +28,14 @@ export interface ITDropfileProps {
   onFileSelect: (file: File | null) => void;
   /** Called when the user cancels the current selection. */
   onCancel?: () => void;
-  /** Called when the user confirms and submits the file. */
-  onSubmit?: (file: File) => void;
+  /** Called when the user confirms and submits the file. With `autoUpload`, it runs right after selection and may return a promise that drives the status. */
+  onSubmit?: (file: File) => void | Promise<void>;
+  /**
+   * Sube en cuanto se elige el archivo, sin paso de confirmar. Usa `onSubmit` como la subida:
+   * el estado pasa a subiendo y luego a subido, o a error si la promesa falla.
+   * @default false
+   */
+  autoUpload?: boolean;
   /** List of accepted MIME types. */
   acceptedFileTypes?: FileTypeEnum[];
   /** Additional classes for the preview/content area. */

package/src/components/organisms/dropfile/dropfile.tsx

@@ -43,6 +43,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   onFileSelect,
   onCancel,
   onSubmit,
+  autoUpload = false,
   contentClassName,
   containerClassName,
   acceptedFileTypes = [FileTypeEnum.PDF, FileTypeEnum.XLS, FileTypeEnum.XLSX, FileTypeEnum.JPG, FileTypeEnum.PNG, FileTypeEnum.JPEG],
@@ -207,6 +208,20 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
     );
   };
 
+  /** Subida automática: corre `onSubmit` al elegir el archivo y sigue su estado. */
+  const runAutoUpload = async (file: File) => {
+    setIsConfirmed(true);
+    setUploadStatus(UploadStatus.UPLOADING);
+    try {
+      onFileSelect(file);
+      await onSubmit?.(file);
+      setUploadStatus(UploadStatus.UPLOADED);
+    } catch (error) {
+      setUploadStatus(UploadStatus.ERROR);
+      console.error("Error al subir archivo:", error);
+    }
+  };
+
   const onDrop = (acceptedFiles: File[]) => {
     const file = acceptedFiles[0];
     if (file) {
@@ -224,6 +239,8 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           const previewUrl = URL.createObjectURL(file);
           setImagePreview(previewUrl);
         }
+
+        if (autoUpload) void runAutoUpload(file);
       } else {
         alert(t("dropfile.fileTypeNotAllowed"));
         setSelectedFile(null);

package/src/i18n/locales/en.ts

@@ -212,6 +212,13 @@ const en: ITMessages = {
   "jsonEditor.kindNumber": "number",
   "jsonEditor.kindBoolean": "boolean",
   "jsonEditor.kindNull": "null",
+
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Required field.",
+  "jsonRenderer.form.email": "Enter a valid email address.",
+  "jsonRenderer.form.minLength": "Enter at least {min} characters.",
+  "jsonRenderer.form.maxLength": "Enter at most {max} characters.",
+  "jsonRenderer.form.submit": "Submit",
 };
 
 export default en;

package/src/i18n/locales/es.ts

@@ -214,6 +214,13 @@ const es: ITMessages = {
   "jsonEditor.kindNumber": "número",
   "jsonEditor.kindBoolean": "booleano",
   "jsonEditor.kindNull": "nulo",
+
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Campo obligatorio.",
+  "jsonRenderer.form.email": "Escribe un correo válido.",
+  "jsonRenderer.form.minLength": "Escribe al menos {min} caracteres.",
+  "jsonRenderer.form.maxLength": "Escribe como máximo {max} caracteres.",
+  "jsonRenderer.form.submit": "Enviar",
 };
 
 export default es;

package/src/index.ts

@@ -84,6 +84,7 @@ import {
   GLOBALLY_FORBIDDEN_PROPS,
   resolveNode,
   parsePartialSchema,
+  useSchemaStream,
   isNodePending,
   JsonEngineError,
   issue,
@@ -102,8 +103,30 @@ import {
   DEFAULT_MIGRATIONS,
   buildVocabularyContract,
   formatVocabularyForPrompt,
+  createBindingResolver,
+  validateRoutes,
+  flattenRoutes,
+  joinRoutePath,
+  matchRoute,
+  routeHref,
+  buildNavigationTree,
+  navContainsRoute,
 } from "./json-renderer";
 import type {
+  DataHandler,
+  DataLoader,
+  BindingScope,
+  BindingResolver,
+  SlotComponent,
+  SlotRegistry,
+  EffectRegistry,
+  ToastVariant,
+  RoutesSchema,
+  RouteSchema,
+  RouteNavSchema,
+  FlatRoute,
+  RouteMatch,
+  NavNode,
   ITJsonRenderEngineProps,
   ScreenSchema,
   NodeSchema,
@@ -122,6 +145,7 @@ import type {
   UnresolvedNode,
   PartialParseResult,
   StreamState,
+  StreamSource,
   JsonEngineIssue,
   JsonEngineCode,
   JsonEngineSeverity,
@@ -247,11 +271,13 @@ export {
   ITSchemaRenderer, NodeBoundary, renderNode, auditTree, countPendingNodes,
   axzyCatalog, axzyCatalogTypes, AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES,
   createCatalog, getCatalogEntry, isExcludedType, getExclusionReason, GLOBALLY_FORBIDDEN_PROPS,
-  resolveNode, parsePartialSchema, isNodePending,
+  resolveNode, parsePartialSchema, isNodePending, useSchemaStream,
   JsonEngineError, issue, formatPath, parsePath, readPath, hasPath, pushPath, propPath,
   DEFAULT_LIMITS, resolveLimits, createLimitTracker,
   validateSchema, CURRENT_SCHEMA_VERSION, migrateSchema, DEFAULT_MIGRATIONS,
   buildVocabularyContract, formatVocabularyForPrompt,
+  createBindingResolver,
+  validateRoutes, flattenRoutes, joinRoutePath, matchRoute, routeHref, buildNavigationTree, navContainsRoute,
 };
 
   export type {
@@ -286,9 +312,11 @@ export {
     ITWysiwygProps,
     ITJsonRendererProps, JsonComponentNode, JsonComponentType,
     ITJSONEditorProps,
-    ITJsonRenderEngineProps, ScreenSchema, NodeSchema, SchemaValue, SchemaReference, WhenSchema,
+    ITJsonRenderEngineProps, DataHandler, DataLoader, BindingScope, BindingResolver, SlotComponent, SlotRegistry, EffectRegistry, ToastVariant,
+    RoutesSchema, RouteSchema, RouteNavSchema, FlatRoute, RouteMatch, NavNode,
+    ScreenSchema, NodeSchema, SchemaValue, SchemaReference, WhenSchema,
     ActionSchema, EffectSchema, DataSourceSchema, NodeStatus, Catalog, CatalogEntry, PropSpec, PropKind,
-    ResolvedNode, UnresolvedNode, PartialParseResult, StreamState, JsonEngineIssue, JsonEngineCode,
+    ResolvedNode, UnresolvedNode, PartialParseResult, StreamState, StreamSource, JsonEngineIssue, JsonEngineCode,
     JsonEngineSeverity, SchemaPath, PathSegment, EngineLimits, LimitTracker,
     ValidationReport, ValidationVerdict, ValidateOptions, SchemaMigration, MigrationRegistry, MigrationResult,
     VocabularyContract, ComponentContract, PropContract,