@tailor-platform/app-shell 1.17.0 → 1.19.0

package/skills/app-shell-patterns/references/components/action-panel.md

@@ -17,24 +17,30 @@ import { ActionPanel } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
+<example-preview name="basic-usage"></example-preview>
+
 ```tsx
-<ActionPanel
-  title="Actions"
-  actions={[
-    {
-      key: "create-invoice",
-      label: "Create new sales invoice",
-      icon: <ReceiptIcon />,
-      onClick: () => openCreateInvoiceModal(),
-    },
-    {
-      key: "view-docs",
-      label: "View documentation",
-      icon: <ExternalLinkIcon />,
-      onClick: () => window.open("/docs", "_blank", "noopener,noreferrer"),
-    },
-  ]}
-/>
+function BasicUsage() {
+  return (
+    <ActionPanel
+      title="Actions"
+      actions={[
+        {
+          key: "create-invoice",
+          label: "Create new sales invoice",
+          icon: <Receipt />,
+          onClick: () => {},
+        },
+        {
+          key: "view-docs",
+          label: "View documentation",
+          icon: <ExternalLink />,
+          onClick: () => {},
+        },
+      ]}
+    />
+  );
+}
 ```
 
 ## Props
@@ -43,11 +49,12 @@ _Generated from the type surface — first-party props only._
 
 ### ActionPanelProps
 
-| Prop         | Type           | Default | Description                                   |
-| ------------ | -------------- | ------- | --------------------------------------------- |
-| `actions`    | `ActionItem[]` | -       | List of actions to render                     |
-| `className?` | `string`       | -       | Additional CSS classes for the card container |
-| `title`      | `string`       | -       | Card title                                    |
+| Prop            | Type           | Default | Description                                                                                                                                                                                                                                                                                                   |
+| --------------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `actions`       | `ActionItem[]` | -       | List of actions to render                                                                                                                                                                                                                                                                                     |
+| `className?`    | `string`       | -       | Additional CSS classes for the card container                                                                                                                                                                                                                                                                 |
+| `emptyContent?` | `ReactNode`    | -       | Content shown with consistent padding when actions is empty. Defaults to a localized "No actions available" message. Strings use the default body text styling; other React nodes render unchanged. Pass null to hide the empty content and its additional vertical spacing while keeping the card and title. |
+| `title`         | `string`       | -       | Card title                                                                                                                                                                                                                                                                                                    |
 
 ## Exports
 
@@ -71,7 +78,32 @@ _Generated from the type surface — first-party props only._
 - Rows are rendered as `<button type="button">` elements.
 - `disabled` or `loading` makes the row non-interactive.
 - When `loading` is `true`, the icon slot renders a spinner without shifting layout.
-- Empty actions show a built-in fallback message: `No actions available`.
+- Empty actions show `emptyContent`, which defaults to a styled message localized using the AppShell locale: `No actions available` in English or `利用可能なアクションはありません` in Japanese.
+
+## Custom Empty Content
+
+Pass a string or any `ReactNode` to `emptyContent` to replace the default content when `actions` is empty. Strings use the same muted `Text` body styling as the default message. Other React nodes render directly inside `Card.Content` without a paragraph wrapper and control their own typography. `Card.Content` owns the spacing, and the title, empty content, and action icons share the same 32px horizontal inset. Action rows retain horizontal padding around their hover backgrounds and focus rings. Custom empty content is ignored when actions are present.
+
+<example-preview name="custom-empty-content"></example-preview>
+
+```tsx
+function CustomEmptyContent() {
+  return (
+    <ActionPanel
+      title="操作"
+      actions={[]}
+      emptyContent={
+        <div>
+          <p>利用可能な操作はありません</p>
+          <p>ステータスが変わると、操作が表示されます。</p>
+        </div>
+      }
+    />
+  );
+}
+```
+
+Pass `null` to hide the empty content and its additional vertical spacing while keeping the card and its title. To hide the entire panel when no actions are available, render it conditionally with `actions.length > 0`.
 
 ## With Loading State
 

package/skills/app-shell-patterns/references/components/badge.md

@@ -32,6 +32,7 @@ function BasicUsage() {
       <Badge variant="subtle-warning">Subtle Warning</Badge>
       <Badge variant="subtle-error">Subtle Error</Badge>
       <Badge variant="subtle-info">Subtle Info</Badge>
+      <Badge variant="subtle-neutral">Subtle Neutral</Badge>
     </div>
   );
 }
@@ -54,6 +55,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
 <Badge variant="subtle-warning">Needs Attention</Badge>
 <Badge variant="subtle-error">Needs Review</Badge>
 <Badge variant="subtle-info">In Progress</Badge>
+<Badge variant="subtle-neutral">Archived</Badge>
 ```
 
 ### Outline Variants with Status Dots
@@ -74,9 +76,9 @@ _Generated from the type surface — first-party props only._
 
 ### BadgeProps
 
-| Prop       | Type                                                                                                                                                                                                                                                           | Default     | Description          |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------- |
-| `variant?` | `"error" \| "neutral" \| "success" \| "warning" \| "info" \| "default" \| "subtle-success" \| "subtle-warning" \| "subtle-error" \| "subtle-info" \| "outline-success" \| "outline-warning" \| "outline-error" \| "outline-info" \| "outline-neutral" \| null` | `"default"` | Visual style variant |
+| Prop       | Type                                                                                                                                                                                                                                                                               | Default     | Description          |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------- |
+| `variant?` | `"error" \| "neutral" \| "success" \| "warning" \| "info" \| "default" \| "subtle-success" \| "subtle-warning" \| "subtle-error" \| "subtle-info" \| "subtle-neutral" \| "outline-success" \| "outline-warning" \| "outline-error" \| "outline-info" \| "outline-neutral" \| null` | `"default"` | Visual style variant |
 
 ## Exports
 
@@ -99,6 +101,7 @@ type BadgeVariant =
   | "subtle-warning" // Low-emphasis yellow
   | "subtle-error" // Low-emphasis red/destructive
   | "subtle-info" // Low-emphasis blue
+  | "subtle-neutral" // Low-emphasis gray
   // Outline variants with status dots
   | "outline-success"
   | "outline-warning"
@@ -225,6 +228,7 @@ function ProductBadge({ product }: { product: Product }) {
 | `subtle-warning` | ![Subtle yellow badge] | Low-emphasis pending or attention states   |
 | `subtle-error`   | ![Subtle red badge]    | Low-emphasis failures or exceptions        |
 | `subtle-info`    | ![Subtle blue badge]   | Low-emphasis informational or in-progress  |
+| `subtle-neutral` | ![Subtle gray badge]   | Low-emphasis tags with no status           |
 
 ### Outline Variants