@sd-angular/core 19.0.0-beta.99 → 19.0.4

package/assets/scss/core/_inline-edit.scss

@@ -0,0 +1,105 @@
+// Shared `viewed='inline'` styles for sd-form-controls.
+// why: 1 nguồn cho text-face + editor ẩn (panel control) và input borderless, tránh lặp ~40 dòng/control.
+// Bare-flatten (mat-* internals) KHÔNG nằm ở đây — khác nhau theo control, giữ trong scss riêng.
+
+// Clear-× — hover-gated, đặt cuối "mặt". Include BÊN TRONG rule của phần tử hover (face/input).
+@mixin _inline-clear {
+  .sd-inline-clear {
+    display: none;
+    align-items: center;
+    margin-left: 4px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    line-height: 0;
+    color: var(--sd-text-secondary, #6b7280);
+    transition: color 0.15s ease;
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      color: var(--sd-error, #b32626);
+    }
+  }
+
+  &:hover .sd-inline-clear {
+    display: inline-flex;
+  }
+}
+
+// Panel-based controls (select / date / datetime / date-range / autocomplete):
+// `<sd-view>` text là "mặt" + trigger; editor render ẩn (overlay) chỉ để neo + mở panel.
+@mixin sd-inline-panel {
+  // Neo cho .sd-inline-editor (absolute). Bare flatten + display nằm ở :host(.sd-bare) riêng của control.
+  :host(.sd-bare) {
+    position: relative;
+  }
+
+  .sd-inline-view {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    // why: nền nhẹ + đậm hơn khi hover → tín hiệu "viewed có thể bấm để sửa".
+    padding: 1px 6px;
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.04);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    @include _inline-clear;
+  }
+
+  // why: editor vô hình phủ lên face. Tắt pointer-events CẢ cây con (mat-* tự bật lại ở trigger)
+  // để hover/click rơi xuống .sd-inline-view ở mọi chỗ. Panel mở qua enterInlineEdit() → open().
+  .sd-inline-editor {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+
+    ::ng-deep * {
+      pointer-events: none !important;
+    }
+  }
+}
+
+// NOTE: the former `sd-inline-input` mixin (mat-form-field flatten for the input/input-number
+// inline variant) was removed when those controls moved to the <sd-inline-text> primitive
+// (forms/inline-text), which owns its own borderless styling. The panel mixin above stays.
+
+// Multiline input (textarea): no panel, no single-line `<sd-inline-text>` — flatten the
+// mat-form-field so the `<textarea>` reads like text, transparent with a hover/focus affordance.
+@mixin sd-inline-textarea {
+  .sd-inline-textarea {
+    cursor: text;
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.04);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    &:focus-within {
+      background-color: rgba(0, 0, 0, 0.06);
+      box-shadow: inset 0 0 0 1px var(--sd-primary, #1f6feb);
+    }
+
+    ::ng-deep {
+      .mat-mdc-text-field-wrapper { padding: 0 6px; background: transparent; }
+      .mat-mdc-form-field-flex { padding: 0; }
+      .mdc-notched-outline { display: none; }
+      .mat-mdc-form-field-subscript-wrapper { display: none; }
+      .mat-mdc-form-field-infix { padding: 4px 0; min-height: 0; border: 0; }
+    }
+  }
+}

package/assets/scss/core/form.scss

@@ -33,6 +33,48 @@
     }
   }
 
+  // why: nút clear "thanh mảnh" dùng chung cho sd-select/sd-date/sd-datetime —
+  // hình tròn nền trong suốt, hover mới hiện nền xám + chuyển đỏ. Icon `close`
+  // (nét mảnh) thay cho `cancel` (tròn đặc, trông "mập"). Đồng bộ với sd-input-color.
+  .sd-clear-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    color: #757575;
+    transition: background-color 80ms ease, color 80ms ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.06);
+      color: map.get(color.$color_map, 'error');
+    }
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+    }
+  }
+
+  // why: biến thể hover-gate — nút clear ẩn cho tới khi hover (hoặc field đang
+  // focus, để người dùng bàn phím vẫn thấy). Dùng cho sd-input/sd-input-number/
+  // sd-input-color/sd-date/sd-datetime. KHÔNG dùng cho sd-select/sd-autocomplete
+  // vì ở đó clear thay thế icon dropdown/search nên phải luôn hiển thị.
+  .sd-clear-btn.sd-hover {
+    visibility: hidden;
+  }
+  .mat-mdc-form-field-flex:hover .sd-clear-btn.sd-hover,
+  .mat-mdc-form-field-flex:focus-within .sd-clear-btn.sd-hover {
+    visibility: visible;
+  }
+
   // sdSuffixIcon
   // Directive sdSuffixIcon (truyền icon từ component sử dụng vào Core)
   .sd-suffix-icon.sd-hover {
@@ -247,13 +289,28 @@
   }
 }
 
-// Fix lỗi scss label của bootstrap có margin bottom
+// Override reboot rule `label { margin-bottom: 0.5rem }` cho mat-checkbox layout
 mat-checkbox {
   label.mat-mdc-checkbox-layout {
     margin-bottom: 0;
   }
 }
 
+// why: selector radio của <sd-table> (.c-selection, single mode) hiện một dấu chấm tối thừa
+// nằm cạnh vòng radio. Nguồn gốc THẬT là state-layer padding của Material trên `.mdc-radio`
+// (`padding: calc((var(--mdc-radio-state-layer-size) - 20px) / 2)`): trong cột selector, .c-selection
+// bị scale(0.85) (xem table.component.scss) còn `.mdc-radio` có `will-change: transform` nên lên
+// compositing layer riêng → phần `.mdc-radio__inner-circle` (transform: scale(0), border 10px màu
+// tối) bị render rớt lại ~1px artifact trong dải padding đó, đọc thành "dấu chấm". Bỏ state-layer
+// padding cho radio selector compact là khử sạch (vòng 20px + scale 0.85 vẫn căn giữa). Scope theo
+// `.c-selection` nên KHÔNG ảnh hưởng radio ở nơi khác (giữ nguyên vùng hover/state-layer của chúng).
+//
+// LƯU Ý: cách trước (`label.mdc-label:empty { display:none }`) KHÔNG khử được dot — nó chỉ TÁCH dot
+// thành 2 dấu chấm (label rỗng vốn đang phủ chồng lên artifact). Đã thay bằng fix dưới đây.
+.c-selection.mat-mdc-radio-button .mdc-radio {
+  padding: 0;
+}
+
 // Placeholder mặc định 1rem (16px), mong muốn nên là 14px
 .mat-mdc-floating-label {
   font-size: 14px !important;

package/assets/scss/core/image.scss

@@ -0,0 +1,35 @@
+// Centralized state-image classes.
+// why: previously each component referenced its own assets/*.svg via `content: url(...)`,
+// duplicating files across modules. Single source of truth here so a designer can swap
+// an asset in `assets/images/` without grepping the codebase.
+//
+// Usage:
+//   <img class="sd-image-not-found" alt="not-found" />
+// or inside ::before / ::after via @extend:
+//   &::before { @extend .sd-image-data-empty; }
+
+$sd-image-path: '../../images' !default;
+
+$sd-images: (
+  'coming-soon',
+  'data-empty',
+  'expired',
+  'file-error',
+  'filter-empty',
+  'filter-required',
+  'forbidden',
+  'image-error',
+  'maintenance',
+  'not-found',
+  'offline',
+  'submitted',
+  'success',
+  'unauthorized',
+  'unknown-error'
+);
+
+@each $name in $sd-images {
+  .sd-image-#{$name} {
+    content: url('#{$sd-image-path}/#{$name}.svg');
+  }
+}

package/assets/scss/core/utilities/_base.scss

@@ -1,9 +1,9 @@
 // --------------------------------------------------------------------------
-// Base / Reboot — thay thế Bootstrap _reboot.scss
-//   Chuẩn hóa rendering giữa các browser, thiết lập baseline cho toàn bộ
-//   ứng dụng. Không phụ thuộc Bootstrap variables hay mixins.
+// Base / Reboot — chuẩn hóa rendering giữa các browser, thiết lập baseline
+//   cho toàn bộ ứng dụng. Thuần CSS, không phụ thuộc 3rd-party reset.
 //
-//   Nguồn tham khảo: Bootstrap 4 reboot + modern-normalize
+//   Nguồn gốc rule: kế thừa từ Bootstrap 4 reboot + modern-normalize (đã được
+//   inline trực tiếp ở đây để dứt điểm phụ thuộc Bootstrap).
 // --------------------------------------------------------------------------
 
 // --------------------------------------------------------------------------
@@ -202,8 +202,8 @@ th {
 // 11. Forms
 // --------------------------------------------------------------------------
 
-// label là inline-block để có thể set margin
-// NOTE: Bootstrap reboot thêm margin-bottom vào label — giữ override này khi còn dùng reboot
+// label là inline-block để có thể set margin; margin-bottom mặc định 0.5rem
+// có thể override per-component (xem core/form.scss cho mat-checkbox).
 label {
   display: inline-block;
   margin-bottom: 0.5rem;

package/assets/scss/core/utilities/_grid.scss

@@ -1,6 +1,7 @@
 // --------------------------------------------------------------------------
-// Grid — Bootstrap-compatible row/col + CSS Grid container
-//   Không phụ thuộc Bootstrap, thuần CSS Flexbox / CSS Grid
+// Grid — row/col 12-column flexbox + native CSS Grid container
+//   Thuần CSS Flexbox / CSS Grid, không phụ thuộc framework ngoài.
+//   Breakpoint convention (sm/md/lg/xl) trùng Bootstrap để host app dễ migrate.
 // --------------------------------------------------------------------------
 
 // --------------------------------------------------------------------------
@@ -63,7 +64,7 @@ $grid-gutter: 16px;
 }
 
 // --------------------------------------------------------------------------
-// 1b. Responsive columns  — Bootstrap-compatible breakpoints
+// 1b. Responsive columns
 //   col-sm-{1-12} : ≥ 576px
 //   col-md-{1-12} : ≥ 768px
 //   col-lg-{1-12} : ≥ 992px

package/assets/scss/core/utilities/_index.scss

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   SD-ANGULAR UTILITY CLASSES — không phụ thuộc Bootstrap
+   SD-ANGULAR UTILITY CLASSES — thuần SCSS, không phụ thuộc 3rd-party.
    Mỗi partial độc lập, có thể import riêng lẻ nếu cần.
    ========================================================================== */
 

package/assets/scss/core/utilities/_sizing.scss

@@ -9,13 +9,13 @@
 
 // Percentage / keyword shorthands
 .w-full   { width: 100% !important; }
-.w-100    { width: 100% !important; } // Bootstrap compat alias
+.w-100    { width: 100% !important; } // alias of w-full
 .w-auto   { width: auto !important; }
 .w-screen { width: 100vw !important; }
 .w-fit    { width: fit-content !important; }
 
 .h-full   { height: 100% !important; }
-.h-100    { height: 100% !important; } // Bootstrap compat alias
+.h-100    { height: 100% !important; } // alias of h-full
 .h-auto   { height: auto !important; }
 .h-screen { height: 100vh !important; }
 .h-fit    { height: fit-content !important; }

package/assets/scss/sd-core.scss

@@ -1,10 +1,9 @@
 @use '../fonts/fonts.scss';
-// Tạm thời giữ bootstrap.scss để so sánh — xóa sau khi confirm _base.scss OK
-// @use './core/bootstrap.scss';
 @use './core/utilities/base';  // Reset / Reboot — phải load trước tất cả
 @use './core/utilities';
 @use './core/color.scss';
 @use './core/form.scss';
+@use './core/image.scss';
 @use './core/scrollbar.scss';
 @use './themes/default.scss';
 @use './themes/material-theme.scss';

package/components/autoid-inspector/src/autoid-inspector.component.d.ts

@@ -16,6 +16,24 @@ export declare class SdAutoidInspector implements OnDestroy {
     highlightOn: import("@angular/core").WritableSignal<boolean>;
     dismissed: import("@angular/core").WritableSignal<boolean>;
     filteredElements: import("@angular/core").Signal<SdAutoidElement[]>;
+    /**
+     * Elements not inside any sd-table — rendered in the main "Top-level" section.
+     */
+    readonly topLevelElements: import("@angular/core").Signal<SdAutoidElement[]>;
+    /**
+     * Map of `sd-table` autoid → its inner autoid elements. Tables themselves
+     * stay in `topLevelElements` (the table's own autoid is top-level).
+     */
+    readonly tableGroups: import("@angular/core").Signal<{
+        scope: string;
+        items: SdAutoidElement[];
+    }[]>;
+    readonly dataOpened: import("@angular/core").Signal<"true" | "false">;
+    readonly dataHighlightOn: import("@angular/core").Signal<"true" | "false">;
+    readonly dataSegment: import("@angular/core").Signal<Segment>;
+    readonly dataElementCount: import("@angular/core").Signal<string>;
+    readonly dataMissingCount: import("@angular/core").Signal<string>;
+    readonly dataDuplicateCount: import("@angular/core").Signal<string>;
     ngOnDestroy(): void;
     togglePanel: () => void;
     openPanel: () => void;

package/components/autoid-inspector/src/models/autoid-element.model.d.ts

@@ -1,11 +1,55 @@
+/**
+ * Runtime state attributes the component renders on the same anchor as `data-autoid`.
+ * Every field is OPTIONAL — only present when the component actually renders that attribute.
+ * All values are the raw DOM string (already "true"/"false" or stringified number/value).
+ */
+export interface SdAutoidElementState {
+    disabled?: string;
+    loading?: string;
+    empty?: string;
+    invalid?: string;
+    opened?: string;
+    count?: string;
+    /** Serialized DOM `data-value` (NOT `input.value`). Distinct from `SdAutoidElement.text` field. */
+    dataValue?: string;
+    required?: string;
+    maxlength?: string;
+    minlength?: string;
+    pattern?: string;
+    errorMessage?: string;
+    type?: string;
+    title?: string;
+    message?: string;
+}
 export interface SdAutoidElement {
     stt: number;
     name: string;
     autoid: string;
     tag: string;
-    value: string;
+    /**
+     * Display text resolved from the DOM: `input.value` for form controls, otherwise
+     * `textContent.trim().slice(0, 80)`. Use `state.dataValue` for the serialized
+     * runtime value rendered by `@sd-angular/core` components.
+     */
+    text: string;
     xpath: string;
     duplicate: boolean;
+    /** Runtime state attributes read from the DOM. Always an object — may be empty `{}`. */
+    state: SdAutoidElementState;
+    /**
+     * `data-autoid` of the closest ancestor `<sd-table>` that contains this element,
+     * or `undefined` if this element is top-level (not inside any `sd-table`).
+     * Used by the UI to group table-scoped elements into a separate section.
+     */
+    tableScope?: string;
+    /**
+     * `true` when the element matched a required selector (sd-button, sd-input, …) but
+     * had NO `data-autoid` — the scanner still emits it with `autoid: ''` and a positional
+     * `xpath` fallback so the export stays usable. The dev should backfill an autoid.
+     */
+    missingAutoid?: boolean;
+    /** Human-readable warning attached to a fallback element (only set when `missingAutoid`). */
+    warning?: string;
 }
 export interface SdAutoidMissing {
     tag: string;

package/components/autoid-inspector/src/models/autoid-export-format.model.d.ts

@@ -1,6 +1,25 @@
 export type SdAutoidExportFormat = 'csv' | 'json' | 'md-pom' | 'md-table';
 export interface SdAutoidExportMeta {
+    /** `location.pathname + location.search` — kept for back-compat with MD exports. */
     pageUrl: string;
     pageTitle: string;
     timestamp: string;
+    /** Full `location.href`. */
+    url: string;
+    /** `location.pathname` only. */
+    pathname: string;
+    /** Raw `location.search` (incl. leading `?`), or `''`. */
+    search: string;
+    /** Parsed query string → key/value map (last value wins on repeats). */
+    queryParams: Record<string, string>;
+    /**
+     * Angular route path params (`:id`, …) merged across the activated-route tree.
+     * Only present when an Angular `Router` is available at scan time; omitted otherwise.
+     */
+    params?: Record<string, string>;
+}
+/** JSON export envelope: page meta + the scanned elements. */
+export interface SdAutoidExportJson {
+    meta: SdAutoidExportMeta;
+    elements: import('./autoid-element.model').SdAutoidElement[];
 }

package/components/autoid-inspector/src/services/autoid-export.service.d.ts

@@ -2,14 +2,22 @@ import { SdAutoidElement } from '../models/autoid-element.model';
 import { SdAutoidExportMeta } from '../models/autoid-export-format.model';
 import * as i0 from "@angular/core";
 export declare class SdAutoidExportService {
-    toJson(elements: SdAutoidElement[]): string;
+    /**
+     * Có `meta` → bọc `{ meta, elements }` (kèm url/queryParams) để consumer biết trang/route.
+     * Không `meta` → giữ mảng thuần (back-compat cho caller cũ chỉ cần elements).
+     */
+    toJson(elements: SdAutoidElement[], meta?: SdAutoidExportMeta): string;
+    /** Parse a `location.search` string into a flat key/value map (last value wins). */
+    parseQueryParams(search: string): Record<string, string>;
     toCsv(elements: SdAutoidElement[]): string;
     /** POM TypeScript skeleton — copy ngay vào file Playwright/Cypress. */
     toMarkdownPom(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
-    /** Markdown reference table, group theo tag sd-*. */
+    /** Markdown reference table, group FIRST by tableScope (top-level first, then per table), then by tag. */
     toMarkdownTable(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
     download(content: string, filename: string, mime: string): void;
     copyToClipboard(content: string): Promise<void>;
+    /** Build a compact state summary string from defined state keys, e.g. "disabled=false; empty=true". */
+    private buildStateSummary;
     private q;
     private mdCell;
     private toCamel;

package/components/autoid-inspector/src/services/autoid-scanner.service.d.ts

@@ -1,13 +1,36 @@
 import { SdAutoidElement } from '../models/autoid-element.model';
 import * as i0 from "@angular/core";
 export declare class SdAutoidScannerService {
-    /** Quét toàn bộ element có [data-autoid] trong root, gắn thông tin name/tag/value/xpath. */
-    scan(root?: HTMLElement): SdAutoidElement[];
+    /**
+     * Quét element có [data-autoid] trong root, gắn name/tag/value/xpath.
+     * Khi truyền `requireSelectors` (vd các sd-* form/button), những node khớp selector
+     * mà KHÔNG có data-autoid (self lẫn con) sẽ được thêm vào dưới dạng phần tử fallback
+     * (`autoid: ''`, xpath theo vị trí thẻ + cờ `missingAutoid` + warning) — để JSON xuất ra
+     * vẫn dùng được và dev biết chỗ cần bổ sung autoid.
+     */
+    scan(root?: HTMLElement, requireSelectors?: ReadonlyArray<string>): SdAutoidElement[];
+    /**
+     * Tìm các node khớp `requireSelectors` nhưng thiếu data-autoid (self + mọi descendant),
+     * thêm vào `result` dưới dạng phần tử fallback. Trả về `stt` kế tiếp.
+     */
+    private appendMissing;
+    /** XPath theo vị trí thẻ trong document, vd `(//sd-button)[2]`, khi không có autoid. */
+    private fallbackXpath;
     /** Group element theo autoid để consumer lấy duplicate map. */
     groupByAutoid(elements: SdAutoidElement[]): Record<string, SdAutoidElement[]>;
+    /**
+     * Read the optional `data-*` E2E state attributes off the same node.
+     * Only includes fields actually present on the DOM (skipped fields stay undefined).
+     */
+    private readState;
+    /**
+     * If the node is inside an `<sd-table>` element, return that table's `data-autoid`.
+     * Walks up via closest('sd-table') — skips the node itself if it IS the table.
+     */
+    private resolveTableScope;
     private resolveName;
     private resolveSdTag;
-    private resolveValue;
+    private resolveText;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidScannerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidScannerService>;
 }

package/components/badge/src/badge.component.d.ts

@@ -1,11 +1,12 @@
 import { EventEmitter } from '@angular/core';
+import { Color, Size } from '@sdcorejs/utils/models';
 import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export type SdBadgeType = 'tag' | 'round' | 'icon';
 export declare class SdBadge {
     defaultIcon: string;
     type: import("@angular/core").InputSignalWithTransform<SdBadgeType, SdBadgeType | null | undefined>;
-    color: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Color, import("@sdcorejs/utils/models").Color | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
     primary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     secondary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     success: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -17,10 +18,10 @@ export declare class SdBadge {
     description: import("@angular/core").InputSignal<string | null | undefined>;
     tooltip: import("@angular/core").InputSignal<string | null | undefined>;
     icon: import("@angular/core").InputSignal<string | null | undefined>;
-    size: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Size, import("@sdcorejs/utils/models").Size | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<Size, Size | null | undefined>;
     click: EventEmitter<Event>;
     onClick: (event: Event) => void;
-    effectiveColor: import("@angular/core").Signal<import("@sdcorejs/utils/models").Color>;
+    effectiveColor: import("@angular/core").Signal<Color>;
     baseColorClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
         'c-secondary': boolean;
@@ -46,6 +47,11 @@ export declare class SdBadge {
         'material-icons-round': boolean;
         'material-icons-sharp': boolean;
     }>;
+    containerSizeClasses: import("@angular/core").Signal<{
+        'c-badge--sm': boolean;
+        'c-badge--md': boolean;
+        'c-badge--lg': boolean;
+    }>;
     tagIconCombinedClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
         'c-secondary': boolean;
@@ -61,6 +67,17 @@ export declare class SdBadge {
         'material-icons-round': boolean;
         'material-icons-sharp': boolean;
     }>;
+    containerCombinedClasses: import("@angular/core").Signal<{
+        'c-badge--sm': boolean;
+        'c-badge--md': boolean;
+        'c-badge--lg': boolean;
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
     iconCombinedClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
         'c-black400': boolean;

package/components/button/src/button.component.d.ts

@@ -1,16 +1,16 @@
 import { OnDestroy, OnInit } from '@angular/core';
-import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
+import { Color } from '@sdcorejs/utils/models';
 import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
 export type SdButtonSize = 'sm' | 'md' | 'lg';
 export type SdButtonHtmlType = 'button' | 'submit' | 'reset';
-export declare class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {
+export declare class SdButton implements OnInit, OnDestroy {
     #private;
     private el;
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     type: import("@angular/core").InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
-    color: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Color, import("@sdcorejs/utils/models").Color | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
     size: import("@angular/core").InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
     fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
     title: import("@angular/core").InputSignal<string | null | undefined>;

package/components/ckeditor-styles/index.d.ts

@@ -0,0 +1 @@
+export * from './src/ckeditor-styles.component';

package/components/ckeditor-styles/src/ckeditor-styles.component.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+/**
+ * Styles-only component that loads the global CKEditor 5 stylesheet on demand.
+ *
+ * Why this exists:
+ * - CKEditor's CSS must be global (applies to body-rendered overlays, dialogs, balloons),
+ *   which means whichever Angular component declares it must use ViewEncapsulation.None.
+ * - Switching encapsulation on the main editor components (`<sd-editor>`, `<sd-mini-editor>`,
+ *   `<sd-document-builder>`) would un-scope all their local styles too.
+ * - Instead, this tiny no-render component owns the global CSS. The editor components embed
+ *   `<sd-ckeditor-styles>` at the top of their template; the CSS is injected once into <head>
+ *   the first time any editor instance mounts. Editor components themselves keep
+ *   ViewEncapsulation.Emulated.
+ *
+ * Behavior:
+ * - Renders nothing in the DOM (empty template).
+ * - Angular dedupes styles per component class — multiple instances inject the <style> tag
+ *   only once.
+ * - When the host editor component is lazy-loaded, this component's chunk and its CSS travel
+ *   with it.
+ */
+export declare class SdCKEditorStyles {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCKEditorStyles, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCKEditorStyles, "sd-ckeditor-styles", never, {}, {}, never, never, true, never>;
+}

package/components/form-generic/src/components/form-builder/form-builder.component.d.ts

@@ -1,6 +1,5 @@
 import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop';
 import { FormGroup } from '@angular/forms';
-import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdModal } from '@sd-angular/core/components/modal';
 import { FormBuilderComponent, FormBuilderComponentGroup, SdFormGenericComponent, SdFormGenericGroup, SdFormGenericVariable } from '../../models';
 import { SdFormGenericValidation } from '../../models/form-generic-validation.model';
@@ -12,7 +11,7 @@ interface DragDropRowItem {
     items: (SdFormGenericComponent | SdFormGenericGroup)[];
     rowIndex?: number;
 }
-export declare class SdFormBuilder extends SdBaseSecureComponent {
+export declare class SdFormBuilder {
     #private;
     readonly popupViewJSON: import("@angular/core").Signal<SdModal | undefined>;
     readonly popupConfigureVariables: import("@angular/core").Signal<SdModal | undefined>;
@@ -39,6 +38,9 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     clonedVariables: SdFormGenericVariable[];
     readonly selectedComponent: import("@angular/core").WritableSignal<SdFormGenericComponent | SdFormGenericGroup | undefined>;
     readonly isPreview: import("@angular/core").WritableSignal<boolean>;
+    readonly editingGroupId: import("@angular/core").WritableSignal<string | undefined>;
+    /** Group đang được Detail (tìm ở TOP-LEVEL theo id), undefined = đang ở canvas chính. */
+    readonly editingGroup: import("@angular/core").Signal<SdFormGenericGroup | undefined>;
     /** Signal toàn cục: TRUE khi BẤT KỲ cdkDrag nào đang active (palette, canvas, group, resize).
      *  Trigger class `.fb-shell--dragging` để ẩn hover/actions/resize toàn diện, không phụ thuộc :has(). */
     readonly isAnyDragging: import("@angular/core").WritableSignal<boolean>;
@@ -70,15 +72,17 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     };
     /** Segmented Design/Preview toggle (replaces play_circle/stop_circle). */
     setMode: (preview: boolean) => void;
-    /** Nested drop handler — when dragging a palette item or canvas item INTO a group body. */
-    dropInGroup: (event: CdkDragDrop<any[]>, group: SdFormGenericGroup) => void;
-    /** Quick-add break sau row chỉ định.
-     *  Tính component index cuối cùng của row đó trong this.components, splice break vào sau.
-     *  Không qua palette — chỉ là utility action bám theo row trên canvas.
+    /** Mở canvas thiết kế riêng cho 1 group (chỉ children của nó). Snapshot để Cancel revert. */
+    enterGroupEdit: (group: SdFormGenericGroup) => void;
+    /** OK: giữ thay đổi children, quay về canvas chính. */
+    confirmGroupEdit: () => void;
+    /** Cancel: revert children về snapshot lúc vào Detail, rồi quay về canvas chính. */
+    cancelGroupEdit: () => void;
+    /** Quick-add break sau row chỉ định (theo scope hiện tại — top-level hoặc group).
+     *  Tính component index cuối cùng của row đó trong scope, splice break vào sau.
      */
     insertBreakAfter: (row: DragDropRowItem) => void;
-    /** Remove a child component from a group's nested list. */
-    removeFromGroup: (group: SdFormGenericGroup, id: string) => void;
+    /** Xoá component theo scope hiện tại (top-level hoặc children của group đang Detail). */
     removeComponent: (id: string) => void;
     selectComponent: (item?: SdFormGenericComponent | SdFormGenericGroup) => void;
     onClickedOutside: (e: any) => void;
@@ -92,12 +96,6 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     noReturnPredicate: () => boolean;
     changeSizeControl: (event: CdkDragMove<SdFormGenericComponent | SdFormGenericGroup>, item: SdFormGenericComponent | SdFormGenericGroup, items: (SdFormGenericComponent | SdFormGenericGroup)[], currentIndex: number) => Promise<void>;
     dragEndChangeSizeControl: (event: any) => void;
-    /** Resize a child item INSIDE a group.
-     *  Math: lấy bounding của chính item, tính (mouse.x - item.left) / colWidth = newCols.
-     *  Cách này đúng cho cả flex-wrap (item ở wrap row 2+) vì dùng item-relative,
-     *  không phải sum-of-all-preceding-cols (sai khi item wrap xuống row mới).
-     */
-    changeSizeChildInGroup: (event: CdkDragMove<SdFormGenericComponent>, child: SdFormGenericComponent, group: SdFormGenericGroup) => void;
     onChangeViewed: (component: SdFormGenericComponent) => void;
     onChangeHidden: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
     onDuplicate: (component: SdFormGenericComponent | SdFormGenericGroup) => void;