@seedgrid/fe-components 2026.4.11 → 2026.4.13

package/dist/layout/SgGrid.meta.js

@@ -0,0 +1,124 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "layout.grid",
+    package: "@seedgrid/fe-components",
+    exportName: "SgGrid",
+    slug: "sg-grid",
+    displayName: "SgGrid",
+    category: "layout",
+    subcategory: "grid",
+    description: "Primitive de layout em grade responsiva para distribuicao de cards, blocos e formularios em colunas e linhas.",
+    tags: ["layout", "grid", "responsive", "columns", "container"],
+    capabilities: ["responsive-columns", "auto-fit", "dense-flow", "row-span", "column-span"],
+    fieldSemantics: ["container", "gridLayout", "responsiveLayout", "collectionLayout"],
+    props: [
+        {
+            name: "columns",
+            type: "number | responsive columns map",
+            description: "Define a quantidade de colunas base e por breakpoint.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "minItemWidth",
+            type: "number | string",
+            description: "Largura minima dos itens em modo auto-fit.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "gap",
+            type: "number | string",
+            default: 0,
+            description: "Espacamento entre os itens da grade.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "padding",
+            type: "number | string",
+            description: "Espacamento interno do container grid.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "dense",
+            type: "boolean",
+            default: false,
+            description: "Ativa preenchimento denso do fluxo de grade.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "rowHeight",
+            type: "number | string",
+            description: "Altura automatica das linhas da grade.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "children",
+            type: "ReactNode",
+            description: "Itens renderizados dentro da grade.",
+            semanticRole: "data",
+            bindable: false
+        }
+    ],
+    states: ["default", "dense", "responsive"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-grid/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-grid/sg-grid.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-grid",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "layout.grid",
+        acceptsDataBinding: true,
+        defaultProps: {
+            columns: {
+                base: 1
+            },
+            gap: 0,
+            dense: false
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Distribuir cards, KPIs e blocos de conteudo em colunas responsivas.",
+        "Montar formularios com varias colunas e alinhamento consistente.",
+        "Criar layouts adaptativos com spans e preenchimento denso."
+    ],
+    avoidUseCases: [
+        "Pilhas lineares simples; nesses casos prefira SgStack.",
+        "Blocos unicos com destaque visual; nesses casos prefira SgCard ou SgPanel.",
+        "Acoes ou captura de dados individuais; nesses casos prefira componentes especificos."
+    ],
+    synonyms: ["grid", "responsive grid", "columns layout", "card grid"],
+    relatedEntityFields: ["dashboardGrid", "cardsLayout", "formColumns", "galleryLayout"],
+    compositionHints: [
+        "Usar com SgCard, SgPanel e SgBadge para dashboards.",
+        "Combinar com SgStack dentro dos itens quando houver alinhamento interno."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0,
+        date: 0,
+        number: 0,
+        denseLayout: 0.98
+    }
+};

package/dist/layout/SgGroupBox.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgGroupBox.meta.d.ts.map

package/dist/layout/SgGroupBox.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgGroupBox.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgGroupBox.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAyEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/layout/SgGroupBox.meta.js

@@ -0,0 +1,99 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "layout.group-box",
+    package: "@seedgrid/fe-components",
+    exportName: "SgGroupBox",
+    slug: "sg-group-box",
+    displayName: "SgGroupBox",
+    category: "layout",
+    subcategory: "group-box",
+    description: "Container simples com titulo visual para agrupar campos e conteudos relacionados em uma secao delimitada.",
+    tags: ["layout", "group", "fieldset", "form-section", "container"],
+    capabilities: ["grouping", "titled-section", "form-block", "sized-container"],
+    fieldSemantics: ["container", "section", "formSection", "group"],
+    props: [
+        {
+            name: "title",
+            type: "string",
+            required: true,
+            description: "Titulo exibido no topo da secao agrupada.",
+            semanticRole: "label",
+            bindable: true
+        },
+        {
+            name: "children",
+            type: "ReactNode",
+            required: true,
+            description: "Conteudo agrupado dentro do fieldset.",
+            semanticRole: "data",
+            bindable: false
+        },
+        {
+            name: "width",
+            type: "number | string",
+            description: "Largura do bloco de agrupamento.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "height",
+            type: "number | string",
+            description: "Altura do bloco de agrupamento.",
+            semanticRole: "behavior",
+            bindable: true
+        }
+    ],
+    states: ["default"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-group-box/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-group-box/sg-group-box.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-group-box",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "layout.group-box",
+        acceptsDataBinding: true,
+        defaultProps: {
+            width: "100%"
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Agrupar campos relacionados em formularios pequenos e medios.",
+        "Criar secoes com titulo visivel em configuracoes, cadastro e dados pessoais.",
+        "Delimitar visualmente conteudo sem adicionar comportamento complexo."
+    ],
+    avoidUseCases: [
+        "Criar hierarquias colapsaveis; nesses casos prefira SgAccordion.",
+        "Blocos com destaque visual mais rico; nesses casos prefira SgCard.",
+        "Acoes e inputs isolados; nesses casos prefira componentes especificos."
+    ],
+    synonyms: ["group box", "fieldset", "form group", "titled section"],
+    relatedEntityFields: ["addressSection", "contactSection", "profileSection", "settingsGroup"],
+    compositionHints: [
+        "Usar com componentes sgInput* para organizar formularios em secoes.",
+        "Combinar com SgButton no rodape quando a secao tiver acoes locais."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0,
+        date: 0,
+        number: 0,
+        denseLayout: 0.8
+    }
+};

package/dist/layout/SgMenu.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgMenu.meta.d.ts.map

package/dist/layout/SgMenu.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgMenu.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA+GpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/layout/SgMenu.meta.js

@@ -0,0 +1,137 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "navigation.menu",
+    package: "@seedgrid/fe-components",
+    exportName: "SgMenu",
+    slug: "sg-menu",
+    displayName: "SgMenu",
+    category: "navigation",
+    subcategory: "menu",
+    description: "Componente de navegacao estruturada com suporte a sidebar, drawer, menu inline e variantes hierarquicas ou mega menu.",
+    tags: ["navigation", "menu", "sidebar", "drawer", "mega-menu"],
+    capabilities: ["hierarchical-navigation", "search", "collapse", "pin", "dock", "brand-user-sections"],
+    fieldSemantics: ["navigation", "menuTree", "appNavigation", "hierarchicalMenu"],
+    props: [
+        {
+            name: "menu",
+            type: "SgMenuNode[]",
+            required: true,
+            description: "Arvore de itens e subitens do menu.",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "selection",
+            type: "SgMenuSelection",
+            description: "Selecao ativa por id ou url.",
+            semanticRole: "value",
+            bindable: true
+        },
+        {
+            name: "menuStyle",
+            type: '"sidebar" | "drawer" | "inline" | "hybrid"',
+            default: "sidebar",
+            description: "Modo estrutural do menu.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "menuVariantStyle",
+            type: '"panel" | "tiered" | "mega-horizontal" | "mega-vertical"',
+            default: "panel",
+            description: "Variante visual e comportamental do menu.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "collapsed",
+            type: "boolean",
+            description: "Controla o estado colapsado do menu.",
+            semanticRole: "value",
+            bindable: true
+        },
+        {
+            name: "search",
+            type: "{ enabled: boolean; placeholder?: string }",
+            description: "Configuracao opcional de busca integrada.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "brand",
+            type: "SgMenuBrand",
+            description: "Bloco de marca no topo do menu.",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "user",
+            type: "SgMenuUser",
+            description: "Bloco de usuario exibido no menu.",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "onNavigate",
+            type: "(node: SgMenuNode) => void",
+            description: "Callback disparado na navegacao por um item.",
+            semanticRole: "event",
+            bindable: false
+        }
+    ],
+    states: ["default", "collapsed", "expanded", "pinned", "searching", "docked"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-menu/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-menu/sg-menu.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-menu",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "navigation.menu",
+        acceptsDataBinding: true,
+        defaultProps: {
+            menuStyle: "sidebar",
+            menuVariantStyle: "panel",
+            closeOnNavigate: true
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Navegacao global ou lateral de aplicacoes com varias areas e niveis.",
+        "Menus persistentes com busca, colapso, pinagem e seccoes de usuario.",
+        "Estruturas de informacao hierarquicas que pedem submenus e mega menus."
+    ],
+    avoidUseCases: [
+        "Indicacao simples de caminho; nesses casos prefira SgBreadcrumb.",
+        "Acoes locais pequenas; nesses casos prefira SgPopup ou SgSplitButton.",
+        "Containers de layout sem semantica de navegacao."
+    ],
+    synonyms: ["menu", "sidebar", "navigation menu", "app menu"],
+    relatedEntityFields: ["menu", "navigation", "navTree", "sidebarItems", "brandMenu"],
+    compositionHints: [
+        "Usar com SgBreadcrumb para navegacao local e contexto de pagina.",
+        "Combinar com SgAvatar e SgBadge em seccoes de usuario e notificacoes."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0.2,
+        date: 0,
+        number: 0,
+        denseLayout: 0.95
+    }
+};

package/dist/layout/SgPageControl.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgPageControl.meta.d.ts.map

package/dist/layout/SgPageControl.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgPageControl.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgPageControl.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA8BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/layout/SgPageControl.meta.js

@@ -0,0 +1,50 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "navigation.page-control",
+    package: "@seedgrid/fe-components",
+    exportName: "SgPageControl",
+    slug: "sg-page-control",
+    displayName: "SgPageControl",
+    category: "navigation",
+    subcategory: "page-control",
+    description: "Controle de paginas em abas para alternar entre paineis de conteudo relacionados em uma mesma area da tela.",
+    tags: ["navigation", "tabs", "page-control", "panels"],
+    capabilities: ["tab-navigation", "controlled-active-page", "hidden-pages", "keyboard-navigation"],
+    fieldSemantics: ["tabs", "pageTabs", "panelNavigation", "sectionSwitcher"],
+    props: [
+        { name: "children", type: "ReactNode", required: true, description: "Paginas filhas definidas por SgPageControlPage.", semanticRole: "data", bindable: false },
+        { name: "activePageId", type: "string", description: "Id da pagina ativa em modo controlado.", semanticRole: "value", bindable: true },
+        { name: "activeIndex", type: "number", description: "Indice ativo em modo controlado.", semanticRole: "value", bindable: true },
+        { name: "keepMounted", type: "boolean", default: false, description: "Mantem paineis inativos montados no DOM.", semanticRole: "behavior", bindable: true },
+        { name: "pageControlStyle", type: '"underline" | "pills"', default: "underline", description: "Estilo visual da lista de abas.", semanticRole: "appearance", bindable: true },
+        { name: "size", type: '"sm" | "md" | "lg"', default: "md", description: "Escala visual das abas.", semanticRole: "appearance", bindable: true },
+        { name: "onActivePageIdChange", type: "(pageId: string, context: object) => void", description: "Callback disparado quando a pagina ativa muda.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "controlled", "keyboard-navigation"],
+    examples: [
+        { id: "basic", title: "Basico", file: "apps/showcase/src/app/components/sg-page-control/samples/basico.tsx.sample", kind: "sample" },
+        { id: "playground", title: "Playground", file: "apps/showcase/src/app/components/sg-page-control/sg-page-control.tsx.playground", kind: "playground" }
+    ],
+    showcase: { route: "/components/sg-page-control", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "navigation.page-control", acceptsDataBinding: true, defaultProps: { pageControlStyle: "underline", size: "md", keepMounted: false } }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Alternar entre secoes irmas como configuracoes, cadastro e detalhes.",
+        "Organizar conteudo em abas sem sair da mesma tela.",
+        "Substituir navegacao lateral quando o conjunto de paginas e pequeno e relacionado."
+    ],
+    avoidUseCases: [
+        "Navegacao global de aplicacao; nesses casos prefira menu.",
+        "Hierarquias profundas; nesses casos prefira breadcrumb ou tree view.",
+        "Layouts permanentes sem alternancia."
+    ],
+    synonyms: ["tabs", "page control", "tabbed navigation", "section tabs"],
+    relatedEntityFields: ["tabs", "sections", "detailsTabs", "settingsTabs"],
+    compositionHints: [
+        "Usar com SgPageControlPage para estruturar paineis filhos.",
+        "Combinar com SgCard, SgPanel e forms multi-secao."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.1, date: 0, number: 0, denseLayout: 0.78 }
+};

package/dist/layout/SgPageControlPage.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgPageControlPage.meta.d.ts.map

package/dist/layout/SgPageControlPage.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgPageControlPage.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgPageControlPage.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA2BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/layout/SgPageControlPage.meta.js

@@ -0,0 +1,47 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "navigation.page-control-page",
+    package: "@seedgrid/fe-components",
+    exportName: "SgPageControlPage",
+    slug: "sg-page-control-page",
+    displayName: "SgPageControlPage",
+    category: "navigation",
+    subcategory: "page-control-page",
+    description: "Declaracao de uma pagina individual dentro de um SgPageControl, com titulo, hint, icone e conteudo associado.",
+    tags: ["navigation", "tabs", "page", "step", "panel"],
+    capabilities: ["tab-page", "title", "hint", "icon", "mount-control"],
+    fieldSemantics: ["tabPage", "navigationPage", "stepPage", "contentPanel"],
+    props: [
+        { name: "id", type: "string", description: "Identificador estavel da pagina.", semanticRole: "value", bindable: true },
+        { name: "title", type: "ReactNode", required: true, description: "Titulo exibido na aba da pagina.", semanticRole: "label", bindable: true },
+        { name: "hint", type: "string", description: "Descricao curta associada a aba.", semanticRole: "label", bindable: true },
+        { name: "icon", type: "ReactNode", description: "Icone opcional da aba.", semanticRole: "label", bindable: true },
+        { name: "hidden", type: "boolean", default: false, description: "Oculta a pagina sem remove-la da estrutura.", semanticRole: "behavior", bindable: true },
+        { name: "disabled", type: "boolean", default: false, description: "Desabilita a selecao da pagina.", semanticRole: "behavior", bindable: true },
+        { name: "children", type: "ReactNode", required: true, description: "Conteudo exibido no painel desta pagina.", semanticRole: "data", bindable: false }
+    ],
+    states: ["default", "active", "hidden", "disabled"],
+    examples: [{ id: "basic", title: "Basico", file: "apps/showcase/src/app/components/sg-page-control/samples/basico.tsx.sample", kind: "sample" }],
+    showcase: { route: "/components/sg-page-control", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "navigation.page-control-page", acceptsDataBinding: true, defaultProps: { hidden: false, disabled: false } }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Declarar paginas internas de um PageControl com conteudo associado.",
+        "Separar secoes navegaveis em abas ou etapas de configuracao.",
+        "Modelar paineis de conteudo com titulo, hint e icone na navegacao superior."
+    ],
+    avoidUseCases: [
+        "Fluxos com botoes de navegacao e validacao sequencial; nesses casos prefira WizardPage.",
+        "Containers independentes sem controle de abas; nesses casos prefira Panel ou Card.",
+        "Menus soltos fora de PageControl."
+    ],
+    synonyms: ["tab page", "page control page", "navigation page", "tab panel"],
+    relatedEntityFields: ["tabs", "pages", "sections", "steps", "panels"],
+    compositionHints: [
+        "Usar sempre como filho de SgPageControl.",
+        "Combinar com icones e hints para melhorar a navegacao entre secoes."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.7, date: 0, number: 0, denseLayout: 0.75 }
+};

package/dist/layout/SgPanel.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgPanel.meta.d.ts.map

package/dist/layout/SgPanel.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgPanel.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgPanel.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAkHpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/layout/SgPanel.meta.js

@@ -0,0 +1,140 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "layout.panel",
+    package: "@seedgrid/fe-components",
+    exportName: "SgPanel",
+    slug: "sg-panel",
+    displayName: "SgPanel",
+    category: "layout",
+    subcategory: "panel",
+    description: "Container visual e estrutural para agrupamento de conteudo, composicao de secoes e cenarios com dock, padding e scroll.",
+    tags: ["layout", "container", "panel", "group"],
+    capabilities: ["container", "grouping", "dock-layout", "scrollable", "grid-span"],
+    fieldSemantics: ["container", "section", "group", "formSection", "highlightedContent"],
+    props: [
+        {
+            name: "align",
+            type: '"top" | "left" | "right" | "bottom" | "client"',
+            default: "client",
+            description: "Posicionamento relativo ao container pai em cenarios de dock.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "width",
+            type: "number | string",
+            description: "Largura do painel quando dockado ou usado em composicoes controladas.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "height",
+            type: "number | string",
+            description: "Altura do painel quando dockado ou usado em composicoes controladas.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "borderStyle",
+            type: '"none" | "solid" | "dashed"',
+            default: "dashed",
+            description: "Estilo visual da borda do container.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "padding",
+            type: "number | string",
+            default: 0,
+            description: "Espacamento externo do painel em relacao ao slot recebido do pai.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "contentPadding",
+            type: "number | string",
+            default: 0,
+            description: "Espacamento interno entre a borda e o conteudo.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "scrollable",
+            type: 'boolean | "auto" | "x" | "y"',
+            default: false,
+            description: "Habilita scroll apenas quando desejado.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "scrollbarGutter",
+            type: "boolean",
+            default: false,
+            description: "Reserva espaco visual para scrollbar.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "children",
+            type: "ReactNode",
+            description: "Conteudo livre ou outros elementos de layout aninhados.",
+            semanticRole: "data",
+            bindable: false
+        }
+    ],
+    states: ["default", "scrollable", "nested"],
+    examples: [
+        {
+            id: "dock-basic",
+            title: "Dock basico",
+            file: "apps/showcase/src/app/components/sg-panel/samples/align-width-height.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-panel/sg-panel.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-panel",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "layout.panel",
+        acceptsDataBinding: true,
+        defaultProps: {
+            align: "client",
+            borderStyle: "dashed",
+            scrollable: false
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Agrupar visualmente conteudo relacionado em secoes ou blocos de formulario.",
+        "Estruturar layouts com dock, areas laterais, cabecalho e rodape.",
+        "Destacar conteudo ou criar containers com scroll controlado."
+    ],
+    avoidUseCases: [
+        "Executar acoes; nesses casos prefira SgButton.",
+        "Capturar dados; nesses casos prefira componentes de input.",
+        "Substituir navegacao especializada; nesses casos prefira componentes de menu e layout dedicados."
+    ],
+    synonyms: ["panel", "container", "section", "group box", "content block"],
+    relatedEntityFields: ["section", "group", "formBlock", "contentArea"],
+    compositionHints: [
+        "Usar como container para campos como SgInputText.",
+        "Combinar com SgButton em rodapes de secao ou areas de acao."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0,
+        date: 0,
+        number: 0,
+        denseLayout: 0.95
+    }
+};

package/dist/layout/SgScreen.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgScreen.meta.d.ts.map

package/dist/layout/SgScreen.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgScreen.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgScreen.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAuFpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}