laif-ds 0.2.76 → 0.2.78

package/dist/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@0.2.78]
+
+### 🐛 Fixed
+
+- **AppEditor**: Fixed missing underline text save in the component output
+
+## [laif-ds@0.2.77]
+
+### 🚀 Added
+
+- **AppCard**: Added new card wrapper component with 4 visual variants (default, elevated, outlined, ghost), support for title, description, body, footer, and actions props with optional header and footer borders, and comprehensive Storybook examples and documentation
+- **AppForm**: Added column span sizing, configurable icon placement, enhanced search options, and comprehensive TypeScript typing improvements
+
+### 🔧 Changed
+
+- **AppForm**: Updated to adopt new form pattern with improved layout, enhanced JSDoc comments, and better type safety across components
+- **General**: Removed "use client" directives and fixed export formatting across components for better compatibility
+
 ## [laif-ds@0.2.76]
 
 ### 🚀 Added

package/dist/_virtual/index3.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/eventemitter3/index2.js";
-var r = t();
-const m = /* @__PURE__ */ e(r);
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
+var t = e();
+const a = /* @__PURE__ */ r(t);
 export {
-  m as default
+  a as default
 };

package/dist/_virtual/index4.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
-var t = e();
-const a = /* @__PURE__ */ r(t);
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/extend/index.js";
+var t = r();
+const x = /* @__PURE__ */ e(t);
 export {
-  a as default
+  x as default
 };

package/dist/_virtual/index5.js

@@ -1,8 +1,8 @@
 "use client";
 import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/extend/index.js";
-var t = r();
-const x = /* @__PURE__ */ e(t);
+import { __require as t } from "../node_modules/eventemitter3/index2.js";
+var r = t();
+const m = /* @__PURE__ */ e(r);
 export {
-  x as default
+  m as default
 };

package/dist/agent-docs/adoption-report.json

@@ -1,12 +1,12 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-03-13T13:58:51.406Z",
+  "generatedAt": "2026-04-01T08:26:06.498Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.76"
+    "version": "0.2.78"
   },
   "summary": {
-    "scannedFiles": 390,
+    "scannedFiles": 393,
     "deprecatedComponentsCount": 2,
     "deprecatedComponentsUsedCount": 0,
     "componentsWithoutExamplesCount": 5,
@@ -15,7 +15,7 @@
     "lowAiReadinessComponentsCount": 42,
     "componentsWithoutAccessibilityCoverageCount": 46,
     "componentsWithWeakStateCoverageCount": 73,
-    "averageAiReadinessScore": 54.23
+    "averageAiReadinessScore": 54.73
   },
   "deprecatedUsage": [],
   "documentationGaps": {
@@ -381,7 +381,7 @@
       },
       {
         "className": "text-muted-foreground text-sm",
-        "occurrences": 25,
+        "occurrences": 28,
         "files": [
           "src/components/stories/app-form.stories.tsx",
           "src/components/stories/app-stepper.stories.tsx",
@@ -397,6 +397,20 @@
           "src/components/ui/tables/data-table/components/data-table-filter-inputs.tsx"
         ]
       },
+      {
+        "className": "text-d-muted-foreground text-sm",
+        "occurrences": 26,
+        "files": [
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/app-dialog.stories.tsx",
+          "src/components/stories/app-kanban.stories.tsx",
+          "src/components/stories/changelog.stories.tsx",
+          "src/components/stories/date-picker.stories.tsx",
+          "src/components/stories/input.stories.tsx",
+          "src/components/stories/toaster.stories.tsx",
+          "src/components/ui/secure-pdf-viewer.tsx"
+        ]
+      },
       {
         "className": "bg-muted rounded-md p-4",
         "occurrences": 20,
@@ -407,16 +421,17 @@
         ]
       },
       {
-        "className": "text-d-muted-foreground text-sm",
+        "className": "flex items-center justify-between",
         "occurrences": 19,
         "files": [
-          "src/components/stories/app-dialog.stories.tsx",
-          "src/components/stories/app-kanban.stories.tsx",
-          "src/components/stories/changelog.stories.tsx",
-          "src/components/stories/date-picker.stories.tsx",
-          "src/components/stories/input.stories.tsx",
-          "src/components/stories/toaster.stories.tsx",
-          "src/components/ui/secure-pdf-viewer.tsx"
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/data-table-utils-example.stories.tsx",
+          "src/components/stories/sidebar.stories.tsx",
+          "src/components/stories/switch.stories.tsx",
+          "src/components/ui/app-form.tsx",
+          "src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
+          "src/components/ui/tables/data-cross-table/data-cross-table.tsx",
+          "src/components/ui/tables/data-cross-table/editable-input.tsx"
         ]
       },
       {
@@ -438,16 +453,10 @@
         ]
       },
       {
-        "className": "flex items-center justify-between",
-        "occurrences": 15,
+        "className": "border-d-border bg-d-muted rounded-lg border p-4",
+        "occurrences": 14,
         "files": [
-          "src/components/stories/data-table-utils-example.stories.tsx",
-          "src/components/stories/sidebar.stories.tsx",
-          "src/components/stories/switch.stories.tsx",
-          "src/components/ui/app-form.tsx",
-          "src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
-          "src/components/ui/tables/data-cross-table/data-cross-table.tsx",
-          "src/components/ui/tables/data-cross-table/editable-input.tsx"
+          "src/components/stories/app-form.stories.tsx"
         ]
       },
       {
@@ -457,13 +466,6 @@
           "src/components/stories/tabs.stories.tsx"
         ]
       },
-      {
-        "className": "border-d-border bg-d-muted rounded-lg border p-4",
-        "occurrences": 11,
-        "files": [
-          "src/components/stories/app-form.stories.tsx"
-        ]
-      },
       {
         "className": "flex w-[550px] flex-col gap-6",
         "occurrences": 10,
@@ -479,6 +481,16 @@
           "src/components/stories/tabs.stories.tsx"
         ]
       },
+      {
+        "className": "flex flex-col items-center gap-4",
+        "occurrences": 8,
+        "files": [
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/confirmer.stories.tsx",
+          "src/components/stories/input-selector.stories.tsx",
+          "src/components/stories/theme-switcher.stories.tsx"
+        ]
+      },
       {
         "className": "text-d-muted-foreground",
         "occurrences": 8,
@@ -524,15 +536,6 @@
           "src/components/stories/button.stories.tsx"
         ]
       },
-      {
-        "className": "flex flex-col items-center gap-4",
-        "occurrences": 7,
-        "files": [
-          "src/components/stories/confirmer.stories.tsx",
-          "src/components/stories/input-selector.stories.tsx",
-          "src/components/stories/theme-switcher.stories.tsx"
-        ]
-      },
       {
         "className": "flex flex-col items-center gap-2",
         "occurrences": 7,

package/dist/agent-docs/components/AppCard.md

@@ -0,0 +1,308 @@
+# AppCard
+
+## Overview
+
+Enhanced card component built on top of the base Card component. Provides a simplified prop-based API with built-in header, body, and footer sections, 10 visual variants (including semantic states), size control, loading skeleton state, and sub-components for advanced composition.
+
+---
+
+## Props
+
+### AppCardProps
+
+| Prop               | Type                                                                                                   | Default     | Description                                                         |
+| ------------------ | ------------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------- |
+| `title`            | `string \| React.ReactNode`                                                                            | `undefined` | Card title displayed in the header.                                 |
+| `description`      | `string \| React.ReactNode`                                                                            | `undefined` | Card description displayed below the title.                         |
+| `header`           | `React.ReactNode`                                                                                      | `undefined` | Custom header content; overrides `title` and `description`.         |
+| `body`             | `React.ReactNode`                                                                                      | `undefined` | Main content rendered inside CardContent.                           |
+| `children`         | `React.ReactNode`                                                                                      | `undefined` | Fallback body content when `body` is not provided.                  |
+| `actions`          | `React.ReactNode`                                                                                      | `undefined` | Right-aligned action elements inside the header.                    |
+| `footer`           | `React.ReactNode`                                                                                      | `undefined` | Footer content (typically action buttons).                          |
+| `variant`          | `AppCardVariant`                                                                                       | `"default"` | Visual variant of the card (see table below).                       |
+| `size`             | `"sm" \| "default" \| "lg" \| "none"`                                                                 | `undefined` | Controls internal padding via the base Card component.              |
+| `isLoading`        | `boolean`                                                                                              | `false`     | When true, renders skeleton placeholders instead of content.        |
+| `showHeaderBorder` | `boolean`                                                                                              | `false`     | Displays a border between the header and body sections.             |
+| `showFooterBorder` | `boolean`                                                                                              | `false`     | Displays a border between the body and footer sections.             |
+| `className`        | `string`                                                                                               | `undefined` | Additional classes for the card container.                          |
+| `headerClassName`  | `string`                                                                                               | `undefined` | Additional classes for the header section.                          |
+| `bodyClassName`    | `string`                                                                                               | `undefined` | Additional classes for the body section.                            |
+| `footerClassName`  | `string`                                                                                               | `undefined` | Additional classes for the footer section.                          |
+
+### Variant Reference
+
+| Variant       | Description                                                                     |
+| ------------- | ------------------------------------------------------------------------------- |
+| `default`     | Standard card with background, border, and subtle shadow.                       |
+| `elevated`    | Stronger shadow for layered or floating layouts.                                |
+| `outlined`    | Transparent background with visible border; no shadow.                          |
+| `ghost`       | No border, no shadow — blends seamlessly into the background.                   |
+| `flat`        | Muted background, no border or shadow; ideal for nested card contexts.          |
+| `interactive` | Default styling with hover shadow and border accent; pointer cursor for clicks. |
+| `success`     | Green-tinted semantic card for positive states and confirmations.               |
+| `warning`     | Amber-tinted semantic card for cautionary messages and alerts.                  |
+| `destructive` | Red-tinted semantic card for errors, danger states, or critical notices.        |
+| `info`        | Primary-tinted semantic card for informational context and updates.             |
+
+### Size Reference
+
+| Size      | Description                                          |
+| --------- | ---------------------------------------------------- |
+| `sm`      | Reduced padding — compact cards and nested contexts. |
+| `default` | Standard padding (base Card default).                |
+| `lg`      | Spacious padding for prominent content areas.        |
+| `none`    | No default padding — apply custom padding manually.  |
+
+---
+
+## Exports
+
+- **AppCard**: Main card component.
+- **AppCardHeader**: Sub-component for composing custom headers.
+- **AppCardBody**: Sub-component for composing custom body sections.
+- **AppCardFooter**: Sub-component for composing custom footer sections.
+- **AppCardProps**: TypeScript interface for AppCard props.
+- **AppCardHeaderProps**: TypeScript interface for AppCardHeader props.
+- **AppCardVariant**: Union type of all 10 variant values.
+- **AppCardSize**: Union type of all size values (`"sm" | "default" | "lg" | "none"`).
+
+---
+
+## Behavior
+
+- **`body` vs `children`**: `body` takes precedence. When `body` is omitted, `children` is rendered inside `CardContent`. This allows both prop-based and JSX-composition patterns.
+- **`isLoading`**: When true, all section content is replaced with a skeleton showing a title placeholder, description placeholder, and three text-line placeholders. The skeleton respects the `size` and `variant` of the card.
+- **`size` passthrough**: The `size` prop is forwarded to the underlying `Card` component, controlling padding and gap via the base `paddingMap`.
+- **Conditional sections**: Header, body, and footer sections are only rendered if their corresponding props have content. An empty card renders just the card container.
+- **Header border**: Setting `showHeaderBorder` adds `border-b` to the `CardHeader`. When absent, the body section removes its top padding to maintain visual continuity.
+- **Footer border**: Setting `showFooterBorder` adds `border-b` to the body `CardContent`. When absent, the footer section removes its top padding.
+- **`interactive` variant**: Adds `cursor-pointer` and hover-triggered shadow/border transitions. The card is a `div`, so attach `onClick` directly to the `AppCard` element.
+- **Focus management**: The card container uses `focusRingWithin` from `designTokens`, so focusable elements inside the card display the system focus ring.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { AppCard, Button } from "laif-ds";
+
+export function BasicCard() {
+  return (
+    <AppCard
+      title="Card Title"
+      description="Optional description providing additional context."
+      body={<p>Main content of the card.</p>}
+      footer={<Button>Primary Action</Button>}
+      className="w-[380px]"
+    />
+  );
+}
+```
+
+### Semantic Variants
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function SemanticCards() {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <AppCard
+        title="Operation Successful"
+        description="All services are running normally."
+        body={<p>Deployment completed in 2m 34s.</p>}
+        variant="success"
+        className="w-[300px]"
+      />
+      <AppCard
+        title="Warning"
+        description="Storage usage is high."
+        body={<p>Disk at 80% capacity. Consider cleanup.</p>}
+        variant="warning"
+        className="w-[300px]"
+      />
+      <AppCard
+        title="Error Detected"
+        description="Service is not responding."
+        body={<p>Payment gateway returned a 503 error.</p>}
+        variant="destructive"
+        className="w-[300px]"
+      />
+      <AppCard
+        title="Update Available"
+        description="Version 2.4.0 is ready to install."
+        body={<p>Includes security patches and new features.</p>}
+        variant="info"
+        className="w-[300px]"
+      />
+    </div>
+  );
+}
+```
+
+### Interactive Card with onClick
+
+```tsx
+import { useState } from "react";
+import { AppCard } from "laif-ds";
+
+export function ClickableCard() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <AppCard
+      title="Clickable Card"
+      description="Click anywhere on the card"
+      body={<p className="text-sm">Clicked {count} times.</p>}
+      variant="interactive"
+      onClick={() => setCount((c) => c + 1)}
+      className="w-[320px]"
+    />
+  );
+}
+```
+
+### Loading State
+
+```tsx
+import { useState } from "react";
+import { AppCard, Button } from "laif-ds";
+
+export function LoadingCard() {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setLoading((v) => !v)}>Toggle Loading</Button>
+      <AppCard
+        title="Remote Data Card"
+        description="Loaded from external source"
+        body={<p>This is the real content.</p>}
+        footer={<Button>Action</Button>}
+        isLoading={loading}
+        className="w-[380px]"
+      />
+    </div>
+  );
+}
+```
+
+### Nested Flat Cards
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function NestedCards() {
+  return (
+    <AppCard
+      title="Parent Card"
+      description="Contains nested flat sub-cards"
+      body={
+        <div className="flex flex-col gap-3">
+          <AppCard
+            title="Nested Item A"
+            body={<p className="text-sm">Flat cards have no border or shadow.</p>}
+            variant="flat"
+            size="sm"
+          />
+          <AppCard
+            title="Nested Item B"
+            body={<p className="text-sm">Good for secondary content regions.</p>}
+            variant="flat"
+            size="sm"
+          />
+        </div>
+      }
+      className="w-[420px]"
+    />
+  );
+}
+```
+
+### Size Variants
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function SizeVariants() {
+  return (
+    <div className="flex flex-col gap-6 w-[400px]">
+      <AppCard
+        size="sm"
+        title="Size: Small"
+        description="Reduced padding for compact layouts"
+        body={<p>This card uses size="sm".</p>}
+      />
+      <AppCard
+        size="default"
+        title="Size: Default"
+        description="Standard padding"
+        body={<p>This card uses size="default".</p>}
+      />
+      <AppCard
+        size="lg"
+        title="Size: Large"
+        description="Spacious padding for prominent content"
+        body={<p>This card uses size="lg".</p>}
+      />
+    </div>
+  );
+}
+```
+
+### Children as Fallback Body
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function ChildrenCard() {
+  return (
+    <AppCard title="Card with Children" className="w-[380px]">
+      <p>This content is passed as children and rendered inside CardContent.</p>
+    </AppCard>
+  );
+}
+```
+
+### Advanced Composition with Sub-components
+
+```tsx
+import {
+  AppCard,
+  AppCardHeader,
+  AppCardBody,
+  AppCardFooter,
+  Button,
+  Badge,
+} from "laif-ds";
+
+export function ComposedCard() {
+  return (
+    <AppCard className="w-[380px]">
+      <AppCardHeader
+        title="Advanced Composition"
+        description="Using sub-components directly"
+        actions={<Badge>New</Badge>}
+      />
+      <AppCardBody>
+        <p>Full control over each section independently.</p>
+      </AppCardBody>
+      <AppCardFooter>
+        <Button className="w-full">Confirm</Button>
+      </AppCardFooter>
+    </AppCard>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **`body` vs `children` precedence**: If both are provided, `body` wins. Use `body` for the prop-based API and `children` when composing JSX naturally.
+- **`interactive` variant and accessibility**: The `interactive` variant only adds visual affordances (hover states, pointer cursor). For keyboard accessibility on a clickable card, consider wrapping with an `<a>` or `<button>` using `asChild` on a child component, or ensure the card content includes a focusable element.
+- **Sub-components**: `AppCardHeader`, `AppCardBody`, and `AppCardFooter` wrap the base `CardHeader`, `CardContent`, and `CardFooter` respectively. Use them when the prop API of `AppCard` is insufficient for your layout needs.
+- **vs Card**: Use `AppCard` for most card use cases — it handles conditional rendering and spacing automatically. Use the base `Card` and its sub-components directly when you need maximum layout control with no abstraction overhead.
+- **Semantic variants and theming**: The semantic variant colors (`success`, `warning`, `destructive`, `info`) use CSS variable tokens that respond to light/dark mode automatically.

package/dist/agent-docs/components/AppEditor.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Rich text editor powered by Lexical with optional Markdown sync. Supports configurable toolbars (block format, font format, history), clear action, and character counter.
+Rich text editor powered by Lexical with optional Markdown sync. Supports configurable toolbars (block format, font format, history), clear action, character counter, and extended Markdown syntax including underline support.
 
 ---
 
@@ -23,14 +23,16 @@ Rich text editor powered by Lexical with optional Markdown sync. Supports config
 ## Behavior
 
 - **Markdown sync**: When `onlyMarkdown=true`, initializes from Markdown and emits Markdown on every change.
+- **Extended Markdown**: Supports standard Markdown plus underline syntax using `++text++` (e.g., `++underlined text++`).
 - **Toolbars**:
   - `history`: undo/redo toolbar.
-  - `block-format`: heading levels, list types, quote.
-  - `font-format`: bold/italic/underline/strikethrough.
+  - `block-format`: heading levels (h1-h3), numbered/bulleted/check lists, blockquote.
+  - `font-format`: bold, italic, underline, strikethrough, inline code.
 - **Plugins**:
   - `clear`: clear actions in the footer.
   - `counter`: UTF-16 character counter in the footer.
 - **Editing**: Autosave via `onMarkdownEdit`. Keyboard navigation and selection per Lexical defaults.
+- **Markdown Features**: Full support for headings, lists, quotes, links, inline code, bold, italic, strikethrough, and custom underline syntax.
 
 ---
 
@@ -69,7 +71,7 @@ import * as React from "react";
 import { AppEditor } from "laif-ds";
 
 export function MarkdownDefault() {
-  const initial = "**Titolo** con testo in markdown";
+  const initial = "**Titolo** con testo in ++markdown++ e *corsivo*";
   const [md, setMd] = React.useState(initial);
   return (
     <AppEditor
@@ -81,10 +83,31 @@ export function MarkdownDefault() {
 }
 ```
 
+### Underline Support
+
+```tsx
+import * as React from "react";
+import { AppEditor } from "laif-ds";
+
+export function UnderlineExample() {
+  const initial = "Testo normale ++testo sottolineato++ altro normale";
+  const [md, setMd] = React.useState(initial);
+  return (
+    <AppEditor
+      defaultValue={initial}
+      onMarkdownEdit={setMd}
+      toolbars={["font-format"]}
+    />
+  );
+}
+```
+
 ---
 
 ## Notes
 
-- **Sizing**: Control height via `className` (e.g., `h-96`).
+- **Sizing**: Control height via `className` (e.g., `h-96`). Default height is `h-72`.
 - **Performance**: Prefer Markdown mode for content pipelines that store Markdown; use `onlyMarkdown=false` for plain text initialization.
 - **Accessibility**: Toolbar buttons and editor area follow Lexical best practices.
+- **Underline Syntax**: Uses `++text++` format which is not standard Markdown but supported in this component for rich text export/import.
+- **Theme**: Uses design system tokens for consistent styling with `border-d-border`, `bg-d-background`, etc.