@_tc/template-core 0.1.13 → 0.1.15

package/.skills/tc-component-usage-skills/SKILL.md

@@ -1,21 +1,23 @@
 ---
 name: tc-component-usage-skills
-description: Use when building or modifying React UI in this TemplateCore project. Covers how to choose, compose, and correctly use components from `@tc/ui-react` (the `packages/ui/react/components/` library). Includes patterns for forms, tables, modals, drawers, menus, and all other TC UI components.
+description: Use when building or modifying React UI in TemplateCore projects. Covers how to choose, compose, and correctly use components from `@tc/ui-react` / `@_tc/template-core/fe/rc`, plus TemplateCore frontend helpers from `@_tc/template-core/fe` such as `AsyncSelect`, `LanguageSwitch`, and `ThemeSwitch`. Includes patterns for forms, tables, modals, drawers, menus, Dashboard toolbar UI, and TC visual style.
 ---
 
 # TC Component Usage
 
-Use this skill when writing React components that consume `@tc/ui-react`.
+Use this skill when writing React components that consume `@tc/ui-react`, `@_tc/template-core/fe/rc`, or TemplateCore frontend helpers from `@_tc/template-core/fe`.
 
 ## Quick Decision Flow
 
 1. **Displaying data?** → `DataTable` or `Card`
-2. **Collecting input?** → `Form` / `SchemaForm` (built on `rc-field-form`) with `Input`, `Select`, `DatePicker`, `Switch`, `Textarea`, `InputNumber`, `Checkbox`, `Radio`, `TreeSelect`, `Upload`
+2. **Collecting input?** → `Form` / `SchemaForm` (built on `rc-field-form`) with `Input`, `Select`, `DatePicker`, `Switch`, `Textarea`, `InputNumber`, `Checkbox`, `Radio`, `TreeSelect`, `Upload`; TemplateCore model-driven pages can also use framework field type `asyncSelect`
 3. **Page layout?** → `Layout`
-4. **Overlays?** → `Modal` / `modalManager.confirm()` / `Drawer` / `Popup` / `Tooltip` / `ImagePreview`
+4. **Overlays?** → `Modal` / `modal.confirm()` / `Drawer` / `Popup` / `Tooltip` / `ImagePreview`
 5. **Navigation?** → `Menu` / `Breadcrumb` / `Tabs` / `Pagination`
 6. **Feedback?** → `message.success()` / `Notification` / `Loading` / `Skeleton` / `ConfirmDialog`
 7. **Search & filter?** → `TableSearch` / `Search`
+8. **Language/theme toolbar?** → `LanguageSwitch` / `ThemeSwitch` from `@_tc/template-core/fe`
+9. **Remote select options?** → `AsyncSelect` from `@_tc/template-core/fe`
 
 ## Core Patterns
 
@@ -36,15 +38,15 @@ Every input-like component supports both modes. Check for `value !== undefined`
 `Form` / `FormItem` / `SchemaForm` wrap `rc-field-form`. `FormItem` auto-clones children to inject `value`/`onChange`. Prefer `SchemaForm` for data-driven forms:
 
 ```tsx
-const form = useForm<T>();
+const [form] = useForm<T>();
 <SchemaForm form={form} schemas={[
   { key: 'name', label: 'Name', type: 'input', required: true },
   { key: 'status', label: 'Status', type: 'select', fieldProps: { options: [...] } },
 ]} onFinish={(vals) => ...} />
 ```
 
-Built-in `type` values: `input`, `inputNumber`, `select`, `textarea`, `switch`, `date`, `checkbox`.
-Custom types are registered via `@tc/scalability/SchemaForm/data`.
+UI-library built-in `type` values: `input`, `inputNumber`, `select`, `textarea`, `switch`, `date`, `checkbox`.
+TemplateCore adds framework type `asyncSelect` via `@tc/scalability/SchemaForm/frameData`; custom app types are registered via `@tc/scalability/SchemaForm/data`.
 
 ### Modal (Declarative + Imperative)
 
@@ -55,7 +57,7 @@ Custom types are registered via `@tc/scalability/SchemaForm/data`.
 </Modal>
 
 // Imperative (async ok supported)
-modalManager.confirm({
+modal.confirm({
   title: 'Confirm',
   content: 'Are you sure?',
   onOk: async () => { await doSomething(); },
@@ -94,6 +96,7 @@ Read the reference files (progressive disclosure):
 - `reference/component-api.md` — Full props tables for every component
 - `reference/patterns.md` — Deeper patterns: schema forms, table columns, action buttons, horizontal forms
 - `reference/examples.md` — Copy-paste examples for common scenarios
+- `reference/template-core-frontend.md` — TemplateCore frontend helper components and Dashboard toolbar composition
 
 ## Validation
 
@@ -106,5 +109,24 @@ pnpm type-check
 ## Component Import Convention
 
 ```tsx
-import { Button, Form, FormItem, Input, DataTable, Modal } from '@tc/ui/react'
+import { Button, Form, FormItem, Input, DataTable, Modal, modal, useForm } from '@tc/ui-react'
+import { AsyncSelect, LanguageSwitch, ThemeSwitch } from '@_tc/template-core/fe'
 ```
+
+When consuming the published TemplateCore package, `@_tc/template-core/fe/rc` re-exports the UI component library:
+
+```tsx
+import { Button, DataTable, TableSearch } from '@_tc/template-core/fe/rc'
+```
+
+Style entry:
+
+```tsx
+import '@tc/ui-react/index.css'
+// or, in published TemplateCore frontend entries:
+import '@_tc/template-core/fe/tailwind_ui.css'
+```
+
+## Visual Style
+
+For `packages/ui/react/components` or TemplateCore business UI, keep the default product feel dark, restrained, dense, and tool-like: stable small type, subtle borders, consistent focus rings, controlled saturated accents, and complete default/hover/focus/active/disabled/loading/error states.

package/.skills/tc-component-usage-skills/reference/component-api.md

@@ -1,6 +1,6 @@
 # Component API Reference
 
-Complete props for every `@tc/ui/react` component.
+Complete props for every `@tc/ui-react` component.
 
 ---
 
@@ -24,6 +24,16 @@ interface ButtonProps {
 
 `variant='link'` renders `<a>` tag. `SubmitButton` / `AsynchronousButton` auto-manage loading state on async onClick.
 
+### SubmitButton / AsynchronousButton
+
+```typescript
+interface SubmitButtonProps extends Omit<ButtonElementProps, 'onClick'> {
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => Promise<void | boolean> | void
+}
+```
+
+Use `SubmitButton` or `AsynchronousButton` for async actions that should show loading and ignore repeated clicks while running. The old misspelled `SumbitButton` name should not be used in new code.
+
 ---
 
 ## Input
@@ -47,20 +57,21 @@ Note: `onChange` callback receives `(stringValue, event)` — two arguments, not
 
 ```typescript
 interface InputNumberProps {
-  value?: number | null
+  value?: number
   defaultValue?: number
-  onChange?: (value: number | null) => void
+  onChange?: (value: number | undefined, event: ChangeEvent<HTMLInputElement>) => void
   min?: number
   max?: number
   precision?: number            // decimal places
   step?: number                  // default: 1
+  allowClear?: boolean | { clearIcon: ReactNode }
   allowStep?: boolean            // show stepper buttons
   disabled?: boolean
   className?: string
 }
 ```
 
-Invalid/empty input becomes `null`. Raw during focus, formatted on blur.
+Invalid/empty input becomes `undefined`. Raw during focus, formatted on blur.
 
 ---
 
@@ -145,23 +156,22 @@ interface SwitchProps {
 
 ```typescript
 interface RadioGroupProps {
-  value?: string | number
-  defaultValue?: string | number
-  onChange?: (value: string | number) => void
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string) => void
   direction?: 'horizontal' | 'vertical'
   className?: string
   children?: ReactNode
 }
 
-interface RadioProps {
-  value: string | number
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> {
+  label?: ReactNode
   disabled?: boolean
   className?: string
-  children?: ReactNode
 }
 ```
 
-Compound components: `<Radio.Group>` + `<Radio>`. Radio auto-detects parent context.
+Use `<RadioGroup>` with `<Radio value="..." label="..." />`. Radio auto-detects parent context; group selection only handles string values.
 
 ---
 
@@ -304,7 +314,7 @@ interface SchemaFormProps<T> {
 }
 ```
 
-**Important:** In `horizontal` layout, `footerButtons` are NOT auto-rendered. Built-in types: `input`, `inputNumber`, `select`, `textarea`, `switch`, `date`, `checkbox`. Extensible via `@tc/scalability/SchemaForm/data`.
+**Important:** In `horizontal` layout, `footerButtons` are NOT auto-rendered. UI-library built-in types: `input`, `inputNumber`, `select`, `textarea`, `switch`, `date`, `checkbox`. TemplateCore also registers framework type `asyncSelect`. App types are extensible via `@tc/scalability/SchemaForm/data`.
 
 ---
 
@@ -324,6 +334,18 @@ interface DataTableProps<T> {
 
 Internal pagination (pageSize: 10) when no external pagination prop. Action columns are auto-sticky right. Loading shows skeleton overlay. Empty state shows no-result image.
 
+### RowSelection
+
+```typescript
+interface RowSelection<T> {
+  selectedRowKeys?: Array<string | number>
+  defaultSelectedRowKeys?: Array<string | number>
+  onChange?: (selectedRowKeys: Array<string | number>, selectedRows: T[], isAll: boolean) => void
+  isAll?: boolean
+  beforeCheckboxNode?: ReactNode
+}
+```
+
 ### TableColumnDef
 
 ```typescript
@@ -335,17 +357,16 @@ Internal pagination (pageSize: 10) when no external pagination prop. Action colu
   key: string
   title: string
   dataIndex: string
-  width?: number
-  minWidth?: number
-  maxWidth?: number
+  width?: string
   fixed?: 'left' | 'right'
-  sortable?: boolean
-  filterable?: boolean
+  isAction?: boolean
+  actions?: DropdownItem[] | ((value, record, index) => DropdownItem[])
+  actionOverflow?: 'auto' | 'dropdown' | 'inline'
   render?: (value, record, index) => ReactNode
 }
 ```
 
-Action columns render via `ActionBtn` component which supports `'auto'` | `'dropdown'` | `'inline'` overflow modes.
+Action columns are detected by `key: 'action'` or `isAction: true`, and render via `ActionBtn` with `'auto'` | `'dropdown'` | `'inline'` overflow modes.
 
 ---
 
@@ -393,13 +414,13 @@ interface ModalProps {
 }
 ```
 
-### ModalManager (imperative)
+### Modal Function API (imperative)
 
 ```typescript
-modalManager.open(config: ModalConfig): string    // returns id
-modalManager.confirm(config: ConfirmConfig): void  // async onOk supported
-modalManager.close(id: string): void
-modalManager.closeAll(): void
+modal.open(config: ModalConfig): string      // returns id
+modal.confirm(config: ConfirmConfig): string // async onOk supported
+modal.close(id: string): void
+modal.closeAll(): void
 ```
 
 ---
@@ -457,23 +478,22 @@ Wraps `Modal` with width: 450 and auto async-supporting ok button.
 
 ```typescript
 interface PopupProps {
-  content: ReactNode
-  children: ReactElement          // single child, acts as trigger
-  placement?: Placement
-  visible?: boolean               // controlled
-  defaultVisible?: boolean
-  onVisibleChange?: (visible: boolean) => void
-  trigger?: 'hover' | 'click'
-  mouseEnterDelay?: number
-  mouseLeaveDelay?: number
+  open: boolean
+  anchorRef: RefObject<HTMLElement | null>
+  children: ReactNode             // popup panel content
+  placement?: DropdownPlacement   // default: 'bottom-end'
+  offset?: number                 // default: 8
   keepMounted?: boolean
-  hoverBridge?: boolean
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  matchAnchorWidth?: boolean
+  onOpenChange?: (open: boolean) => void
   className?: string
-  getContainer?: HTMLElement | (() => HTMLElement)
+  container?: HTMLElement
 }
 ```
 
-Auto-positioned. `hoverBridge` provides safe mouse movement gap.
+Low-level positioned popup. For click-triggered menus, prefer `Dropdown`; for hints, prefer `Tooltip`.
 
 ---
 
@@ -487,14 +507,15 @@ interface DropdownItem {
   danger?: boolean
   onClick?: () => void
   // Or custom render:
-  render?: () => ReactNode
+  render?: (item, context: { onClick: () => void; close: () => void }) => ReactNode
 }
 
 interface DropdownProps {
   items: DropdownItem[]
-  children: ReactElement
-  placement?: Placement
-  // ... other Popup props
+  children: ReactNode
+  placement?: DropdownPlacement
+  className?: string
+  getPopupContainer?: () => HTMLElement
 }
 ```
 
@@ -506,9 +527,9 @@ interface DropdownProps {
 interface TooltipProps {
   content: ReactNode
   children: ReactElement
-  placement?: Placement
+  placement?: 'top' | 'bottom' | 'left' | 'right'
   visible?: boolean
-  // ... other Popup-like props
+  className?: string
 }
 ```
 
@@ -618,7 +639,7 @@ interface PaginationProps {
   current: number
   pageSize: number
   total: number
-  onChange: (page: number, pageSize: number) => void
+  onChange: (page: number) => void
   onPageSizeChange?: (pageSize: number) => void
   pageSizeOptions?: number[]      // default: [10, 20, 50, 100]
   className?: string

package/.skills/tc-component-usage-skills/reference/examples.md

@@ -8,8 +8,8 @@ Copy-paste starting points for common TC UI scenarios.
 
 ```tsx
 import { useState, useEffect, useCallback } from 'react'
-import { DataTable, TableSearch, Button, Modal, SchemaForm, ConfirmDialog, message } from '@tc/ui/react'
-import type { TableColumnDef, TableSearchSchema } from '@tc/ui/react'
+import { DataTable, TableSearch, Button, Modal, SchemaForm, ConfirmDialog, message, useForm } from '@tc/ui-react'
+import type { TableColumnDef, TableSearchSchema } from '@tc/ui-react'
 
 interface Product {
   id: number
@@ -36,7 +36,7 @@ export function ProductList() {
   const [modalOpen, setModalOpen] = useState(false)
   const [editingId, setEditingId] = useState<number | null>(null)
   const [deleteId, setDeleteId] = useState<number | null>(null)
-  const [form] = Form.useForm<ProductForm>()
+  const [form] = useForm<ProductForm>()
 
   const searchSchemas: TableSearchSchema<ProductSearch>[] = [
     { key: 'name', label: 'Name', type: 'input', isPermanent: true },
@@ -45,7 +45,7 @@ export function ProductList() {
   ]
 
   const columns: TableColumnDef<Product>[] = [
-    { key: 'id', title: 'ID', dataIndex: 'id', width: 80 },
+    { key: 'id', title: 'ID', dataIndex: 'id', width: '80px' },
     { key: 'name', title: 'Name', dataIndex: 'name' },
     { key: 'price', title: 'Price', dataIndex: 'price',
       render: (value) => `¥${value}` },
@@ -56,10 +56,10 @@ export function ProductList() {
         </span>
       ) },
     { key: 'createdAt', title: 'Created', dataIndex: 'createdAt' },
-    { key: 'action', title: 'Actions', type: 'action',
-      actions: [
-        { key: 'edit', label: 'Edit', onClick: (record) => openEdit(record) },
-        { key: 'delete', label: 'Delete', danger: true, onClick: (record) => setDeleteId(record.id) },
+    { key: 'action', title: 'Actions',
+      actions: (_value, record) => [
+        { key: 'edit', label: 'Edit', onClick: () => openEdit(record) },
+        { key: 'delete', label: 'Delete', danger: true, onClick: () => setDeleteId(record.id) },
       ] },
   ]
 
@@ -164,7 +164,7 @@ export function ProductList() {
 ## Example 2: Detail Drawer
 
 ```tsx
-import { Drawer, Button, Loading, Skeleton } from '@tc/ui/react'
+import { Drawer, Button, Loading, Skeleton } from '@tc/ui-react'
 
 export function UserDetailDrawer({ userId, open, onClose }: {
   userId: number | null
@@ -207,7 +207,7 @@ export function UserDetailDrawer({ userId, open, onClose }: {
 ## Example 3: App Shell with Sidebar Menu
 
 ```tsx
-import { Layout, Menu, Breadcrumb } from '@tc/ui/react'
+import { Layout, Menu, Breadcrumb } from '@tc/ui-react'
 import { useNavigate, useLocation } from 'react-router-dom'
 
 export function AppShell({ children }: { children: ReactNode }) {
@@ -253,7 +253,7 @@ export function AppShell({ children }: { children: ReactNode }) {
 ## Example 4: Image Upload Form
 
 ```tsx
-import { SchemaForm, ImageUpload } from '@tc/ui/react'
+import { SchemaForm, ImageUpload, message, useForm } from '@tc/ui-react'
 
 interface BannerForm {
   title: string
@@ -261,7 +261,7 @@ interface BannerForm {
 }
 
 function BannerEditor() {
-  const [form] = Form.useForm<BannerForm>()
+  const [form] = useForm<BannerForm>()
 
   return (
     <SchemaForm<BannerForm>
@@ -269,7 +269,7 @@ function BannerEditor() {
       schemas={[
         { key: 'title', label: 'Title', type: 'input', required: true },
         { key: 'images', label: 'Banner Images', type: 'input',
-          render: ({ value, onChange }) => (
+          render: (value, onChange) => (
             <ImageUpload
               value={value}
               onChange={onChange}
@@ -295,7 +295,7 @@ function BannerEditor() {
 ## Example 5: TreeSelect for Permissions
 
 ```tsx
-import { TreeSelect } from '@tc/ui/react'
+import { TreeSelect } from '@tc/ui-react'
 
 function PermissionEditor() {
   const [checked, setChecked] = useState<(string | number)[]>([])
@@ -326,7 +326,7 @@ function PermissionEditor() {
 ## Example 6: DataTable with Row Selection (Batch Actions)
 
 ```tsx
-import { DataTable, Button, message } from '@tc/ui/react'
+import { DataTable, Button, message } from '@tc/ui-react'
 
 function BatchUserList() {
   const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([])
@@ -368,7 +368,7 @@ function BatchUserList() {
 ## Example 7: DatePicker Usage
 
 ```tsx
-import { DatePicker } from '@tc/ui/react'
+import { DatePicker } from '@tc/ui-react'
 
 // Single date
 <DatePicker
@@ -398,7 +398,8 @@ import { DatePicker } from '@tc/ui/react'
 ## Example 8: Tooltip & Popup
 
 ```tsx
-import { Tooltip, Popup, Dropdown, Button } from '@tc/ui/react'
+import { Tooltip, Popup, Dropdown, Button } from '@tc/ui-react'
+import { useRef, useState } from 'react'
 
 // Simple tooltip
 <Tooltip content="Click to save changes">
@@ -415,11 +416,20 @@ import { Tooltip, Popup, Dropdown, Button } from '@tc/ui/react'
 </Dropdown>
 
 // Custom popup
-<Popup
-  content={<UserCard user={user} />}
-  trigger="click"
-  onVisibleChange={(v) => console.log('popup:', v)}
->
-  <span className="cursor-pointer underline">{user.name}</span>
-</Popup>
+function UserPopup({ user }: { user: User }) {
+  const [open, setOpen] = useState(false)
+  const anchorRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <button ref={anchorRef} type="button" onClick={() => setOpen((v) => !v)}
+        className="cursor-pointer underline">
+        {user.name}
+      </button>
+      <Popup open={open} anchorRef={anchorRef} onOpenChange={setOpen}>
+        <UserCard user={user} />
+      </Popup>
+    </>
+  )
+}
 ```

package/.skills/tc-component-usage-skills/reference/patterns.md

@@ -1,6 +1,20 @@
 # Component Patterns
 
-Recurring patterns and best practices for `@tc/ui/react`.
+Recurring patterns and best practices for `@tc/ui-react`.
+
+---
+
+## Visual Style Pattern
+
+For TemplateCore component work, aim for a dark, restrained, collaboration-tool feel:
+
+- Use deep backgrounds, low-contrast panels, subtle borders, and compact text.
+- Reserve saturated color for primary actions, selection, status, and collaboration identity.
+- Keep page shells and panels layered; avoid decorative gradients or oversized marketing-style sections for admin UI.
+- Every reusable component should cover default, hover, focus, active, disabled, loading, and error states where applicable.
+- Prefer stable dimensions for controls, table cells, icon buttons, and fixed-format UI so state changes do not shift layout.
+
+When editing this repository, `packages/ui/react/components/VIDEO_UI_STYLE_GUIDE.md` is the fuller visual reference.
 
 ---
 
@@ -35,13 +49,33 @@ const [form] = useForm<UserForm>()
 
 ### Registering Custom SchemaForm Types
 
+TemplateCore already registers framework field type `asyncSelect`:
+
 ```tsx
-import { registerComponents } from '@tc/scalability/SchemaForm/data'
+<SchemaForm
+  schemas={[
+    {
+      key: 'ownerId',
+      label: 'Owner',
+      type: 'asyncSelect',
+      fieldProps: {
+        fetchConfig: { url: '/user/options', method: 'get' },
+      },
+    },
+  ]}
+/>
+```
+
+The options endpoint should return the normal TemplateCore response wrapper, usually via `this.success(ctx, options)`.
 
-registerComponents({
+```tsx
+// In the app-side module aliased as @tc/scalability/SchemaForm/data:
+const consumerComponentsMap = {
   richText: RichTextEditor,
   userSelector: UserSelect,
-})
+}
+
+export default consumerComponentsMap
 // Now { type: 'richText', ... } works in schemas
 ```
 
@@ -61,16 +95,16 @@ When you need custom logic inside a form field:
 
 `FormItem` auto-clones children to inject `value`/`onChange`. It handles Input's two-arg `onChange(value, event)` signature correctly.
 
-### SubmitButton for Async Forms
+### SubmitButton / AsynchronousButton for Async Forms
 
 ```tsx
-<SubmitButton
+<AsynchronousButton
   onClick={async () => {
     await submitToApi(form.getFieldsValue())
   }}
 >
   Save
-</SubmitButton>
+</AsynchronousButton>
 ```
 
 Auto-shows loading spinner during async execution.
@@ -83,14 +117,14 @@ Auto-shows loading spinner during async execution.
 
 ```tsx
 const columns: TableColumnDef<User>[] = [
-  { key: 'id', title: 'ID', dataIndex: 'id', width: 80 },
+  { key: 'id', title: 'ID', dataIndex: 'id', width: '80px' },
   { key: 'name', title: 'Name', dataIndex: 'name' },
   { key: 'status', title: 'Status', dataIndex: 'status',
     render: (value) => <Badge status={value} /> },
-  { key: 'action', title: 'Actions', type: 'action',
-    actions: [
-      { key: 'edit', label: 'Edit', onClick: (record) => openEdit(record) },
-      { key: 'delete', label: 'Delete', danger: true, onClick: (record) => onDelete(record) },
+  { key: 'action', title: 'Actions',
+    actions: (_value, record) => [
+      { key: 'edit', label: 'Edit', onClick: () => openEdit(record) },
+      { key: 'delete', label: 'Delete', danger: true, onClick: () => onDelete(record) },
     ] },
 ]
 ```
@@ -182,7 +216,7 @@ const [form] = useForm()
   footer={
     <div className="flex justify-end gap-2">
       <Button onClick={() => setOpen(false)}>Cancel</Button>
-      <SubmitButton onClick={() => form.submit()}>Save</SubmitButton>
+      <AsynchronousButton onClick={() => form.submit()}>Save</AsynchronousButton>
     </div>
   }
 >
@@ -203,10 +237,10 @@ const [form] = useForm()
 />
 ```
 
-### Imperative Confirm (modalManager)
+### Imperative Confirm (modal)
 
 ```tsx
-modalManager.confirm({
+modal.confirm({
   title: 'Delete',
   content: 'Are you sure?',
   onOk: async () => { await deleteUser(id); },
@@ -277,7 +311,7 @@ In `mode='top'`, SubMenus always use popup dropdowns.
 ### Toast Messages
 
 ```tsx
-import { message } from '@tc/ui/react'
+import { message } from '@tc/ui-react'
 
 message.success('User created successfully')
 message.error('Failed to save')
@@ -288,7 +322,7 @@ message.info('New update available')
 ### Notifications (Corner)
 
 ```tsx
-import { Notification } from '@tc/ui/react'
+import { Notification } from '@tc/ui-react'
 
 // As component
 <Notification type="error" title="Upload Failed" message="Network error. Retry?" />
@@ -351,6 +385,7 @@ This means both patterns work identically:
 
 ## CSS Conventions
 
+- Import styles before using components: `@tc/ui-react/index.css` for raw UI usage, or `@_tc/template-core/fe/tailwind_ui.css` for published TemplateCore frontend entries.
 - All CSS classes are prefixed `tc-ui-<component-name>`
 - Tailwind CSS used for styling
 - Theme via CSS custom properties: `hsl(var(--theme-primary))`, `hsl(var(--theme-background))`, etc.