@godxjp/ui 31.7.0 → 31.9.0

package/docs/i18n/messages/vi.json

@@ -537,6 +537,34 @@
       "longIdTitle": "Định danh dài và +N",
       "ledgerLabel": "Mã sổ cái",
       "ledgerHelper": "Định danh 71 ký tự vẫn nằm trong khung"
+    },
+    "select": {
+      "createTitle": "Tags: dòng tạo mới, onCreate và so khớp không phân biệt hoa thường",
+      "createDescription": "Văn bản gõ vào không khớp tùy chọn nào được đưa ra thành dòng “Tạo” rõ ràng. onCreate chỉ báo văn bản mới tạo, không bao giờ báo id của tùy chọn. Gõ “bug” sẽ tìm thấy “Bug” thay vì tạo bản trùng (caseSensitive trả lại so khớp chính xác). Khác antd, dòng tạo có nhãn và văn bản dài hơn 12 ký tự bị allowCreate từ chối.",
+      "createField": "Nhãn",
+      "createdHelper": "Đã tạo trong phiên này: {list}",
+      "createdNone": "Chưa tạo gì"
+    },
+    "colorPicker": {
+      "presetsTitle": "Màu thẻ chọn từ bảng màu",
+      "presetsDescription": "presets — các nhóm ô màu cố định dưới bộ chọn; mỗi nhóm thu gọn được, bộ chọn tự do vẫn còn.",
+      "paletteLabel": "Màu nhãn",
+      "recommendedGroup": "Đề xuất",
+      "recentGroup": "Dùng gần đây",
+      "presetsOnlyTitle": "Chỉ bảng màu",
+      "presetsOnlyDescription": "panelRender chỉ trả về Presets — người dùng chọn trong bảng màu, không gõ được mã hex tuỳ ý.",
+      "tagColorLabel": "Màu thẻ",
+      "tagColorHelper": "Phím mũi tên di chuyển giữa các ô màu; ô đang chọn được đọc lên."
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — đưa cột phụ lên trước khi xếp chồng",
+      "lead": "stackOrder=\"aside-first\" đặt cột phụ lên trên cột chính khi khung quá hẹp để chia đôi, và đặt nó trước trong DOM nên phím Tab cũng tới nó trước. Khi đủ rộng để chia, nó nằm ở cột cuối như mặc định. Khung nhúng bên dưới hẹp hơn ngưỡng chia đôi, nên thẻ thuộc tính nằm trên luồng bình luận.",
+      "propertiesTitle": "Thuộc tính",
+      "status": "Trạng thái",
+      "statusValue": "Đang xử lý",
+      "assignee": "Người phụ trách",
+      "threadTitle": "Bình luận",
+      "threadLead": "Trên điện thoại, luồng bình luận dài không còn đẩy phần thuộc tính xuống dưới."
     }
   },
   "serviceLauncherShowcase": {

package/docs/layout/split-pane.tsx

@@ -10,6 +10,7 @@ import {
   StatCard,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-react";
 
 /**
@@ -98,6 +99,7 @@ const yen = (n: number) => yenFormat.format(Math.round(n));
 const toNumber = (amount: string) => Number(amount.replace(/[^0-9]/g, ""));
 
 export default function Demo() {
+  const { t } = useTranslation();
   const [selectedId, setSelectedId] = useState<string>("INV-0241");
   const [asideWidth, setAsideWidth] = useState<"sm" | "md">("md");
   const [threadOpen, setThreadOpen] = useState(true);
@@ -406,6 +408,69 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* ── stackOrder="aside-first" (gh#1057) — the aside stacks ABOVE main when narrow ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.splitPaneStackOrder.title")}</CardTitle>
+            <CardDescription>{t("showcase.splitPaneStackOrder.lead")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card className="max-w-md">
+              <CardContent>
+                <SplitPane
+                  stackOrder="aside-first"
+                  asideWidth="sm"
+                  asideLabel={t("showcase.splitPaneStackOrder.propertiesTitle")}
+                  aside={
+                    <Card variant="muted">
+                      <CardHeader>
+                        <CardTitle level={3} className="text-sm">
+                          {t("showcase.splitPaneStackOrder.propertiesTitle")}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <Flex direction="col" gap="xs">
+                          <Flex direction="row" justify="between" gap="sm">
+                            <Text tone="muted">{t("showcase.splitPaneStackOrder.status")}</Text>
+                            <Badge tone="info">
+                              {t("showcase.splitPaneStackOrder.statusValue")}
+                            </Badge>
+                          </Flex>
+                          <Flex direction="row" justify="between" gap="sm">
+                            <Text tone="muted">{t("showcase.splitPaneStackOrder.assignee")}</Text>
+                            <Text>{THREAD_REPLIES[0].author}</Text>
+                          </Flex>
+                        </Flex>
+                      </CardContent>
+                    </Card>
+                  }
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle level={3} className="text-sm">
+                        {t("showcase.splitPaneStackOrder.threadTitle")}
+                      </CardTitle>
+                      <CardDescription>
+                        {t("showcase.splitPaneStackOrder.threadLead")}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Flex direction="col" gap="sm">
+                        {CHANNEL_MESSAGES.map((message) => (
+                          <Flex key={message.author} direction="col" gap="xs">
+                            <Text weight="medium">{message.author}</Text>
+                            <Text tone="muted">{message.body}</Text>
+                          </Flex>
+                        ))}
+                      </Flex>
+                    </CardContent>
+                  </Card>
+                </SplitPane>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.7.0",
-  "godxUiMcp": "31.7.0",
+  "version": "31.9.0",
+  "godxUiMcp": "31.9.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",