feat(media): extract workspace package

apps/web/i18n.config.json

@@ -7,7 +7,7 @@
     "@workspace/blocks/appearance/locales/{locale}",
     "@workspace/blocks/chats/locales/{locale}",
     "@workspace/blocks/layout/locales/{locale}",
-    "@workspace/blocks/media/locales/{locale}",
+    "@workspace/media/locales/{locale}",
     "@workspace/blocks/navigation/locales/{locale}",
     "@workspace/blocks/notifications/locales/{locale}",
     "@workspace/search/locales/{locale}",
@@ -16,6 +16,7 @@
   "include": [
     "src",
     "../../packages/blocks/src",
+    "../../packages/media/src",
     "../../packages/search/src",
     "../../packages/ui/src"
   ],

apps/web/package.json

@@ -29,6 +29,7 @@
     "@workspace/blocks": "workspace:*",
     "@workspace/i18n": "workspace:*",
     "@workspace/lexical": "workspace:*",
+    "@workspace/media": "workspace:*",
     "@workspace/search": "workspace:*",
     "@workspace/ui": "workspace:*",
     "react": "^19.2.6",

apps/web/src/styles/globals.css

@@ -1,6 +1,7 @@
 @import "@workspace/ui/globals.css";
 @import "@workspace/blocks/globals.css";
 @import "@workspace/lexical/globals.css";
+@import "@workspace/media/globals.css";
 @import "@workspace/search/globals.css";
 
 :root {

bun.lock

@@ -27,6 +27,7 @@
         "@workspace/blocks": "workspace:*",
         "@workspace/i18n": "workspace:*",
         "@workspace/lexical": "workspace:*",
+        "@workspace/media": "workspace:*",
         "@workspace/search": "workspace:*",
         "@workspace/ui": "workspace:*",
         "react": "^19.2.6",
@@ -55,6 +56,7 @@
       "dependencies": {
         "@icones/react": "^0.0.1",
         "@workspace/i18n": "workspace:*",
+        "@workspace/media": "workspace:*",
         "@workspace/preferences": "workspace:*",
         "@workspace/search": "workspace:*",
         "clsx": "^2.1.1",
@@ -165,6 +167,24 @@
         "vitest": "^4.1.10",
       },
     },
+    "packages/media": {
+      "name": "@workspace/media",
+      "version": "0.0.0",
+      "dependencies": {
+        "@workspace/i18n": "workspace:*",
+        "@workspace/ui": "workspace:*",
+        "react": "^19.2.6",
+      },
+      "devDependencies": {
+        "@testing-library/react": "^16.3.2",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "jsdom": "^30.0.1",
+        "react-dom": "^19.2.6",
+        "typescript": "~6",
+        "vitest": "^4.1.10",
+      },
+    },
     "packages/preferences": {
       "name": "@workspace/preferences",
       "version": "0.0.0",
@@ -985,6 +1005,8 @@
 
     "@workspace/lexical": ["@workspace/lexical@workspace:packages/lexical"],
 
+    "@workspace/media": ["@workspace/media@workspace:packages/media"],
+
     "@workspace/preferences": ["@workspace/preferences@workspace:packages/preferences"],
 
     "@workspace/search": ["@workspace/search@workspace:packages/search"],

docs/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@icones/react": "^0.0.1",
     "@workspace/i18n": "workspace:*",
+    "@workspace/media": "workspace:*",
     "@workspace/preferences": "workspace:*",
     "@workspace/search": "workspace:*",
     "clsx": "^2.1.1",

docs/src/index.css

@@ -1,4 +1,5 @@
 @import "@workspace/ui/globals.css";
+@import "@workspace/media/globals.css";
 @import "@workspace/search/globals.css";
 
 @custom-variant dark (&:where(.dark, .dark *));

packages/blocks/package.json

@@ -45,9 +45,6 @@
     "./layout/locales": "./src/blocks/layout/locales/catalogs.ts",
     "./layout/locales/*": "./src/blocks/layout/locales/*.ts",
     "./layouts/vega": "./src/blocks/layouts/vega/index.tsx",
-    "./media": "./src/blocks/media/index.ts",
-    "./media/locales": "./src/blocks/media/locales/catalogs.ts",
-    "./media/locales/*": "./src/blocks/media/locales/*.ts",
     "./navigation": "./src/blocks/navigation/index.ts",
     "./navigation/locales": "./src/blocks/navigation/locales/catalogs.ts",
     "./navigation/locales/*": "./src/blocks/navigation/locales/*.ts",

packages/blocks/src/blocks/media/locales/catalogs.ts

@@ -1,10 +0,0 @@
-import type { mediaMessages } from "../messages"
-import {
-  blockCatalogLocales,
-  type BlockCatalogLocale,
-  type BlockMessageCatalog,
-} from "../../../i18n/catalogs"
-
-export { blockCatalogLocales as mediaCatalogLocales }
-export type MediaCatalogLocale = BlockCatalogLocale
-export type MediaMessageCatalog = BlockMessageCatalog<typeof mediaMessages>

packages/media/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@workspace/media",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@workspace/i18n": "workspace:*",
+    "@workspace/ui": "workspace:*",
+    "react": "^19.2.6"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "jsdom": "^30.0.1",
+    "react-dom": "^19.2.6",
+    "typescript": "~6",
+    "vitest": "^4.1.10"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./globals.css": "./src/styles/globals.css",
+    "./locales": "./src/locales/catalogs.ts",
+    "./locales/*": "./src/locales/*.ts"
+  }
+}

packages/media/src/locales/catalogs.test.ts

@@ -1,6 +1,5 @@
-import { describe, it } from "vitest"
+import { describe, expect, it } from "vitest"
 
-import { expectCompleteCatalogs } from "../../../i18n/test-catalogs"
 import { mediaMessages } from "../messages"
 import { mediaCatalogLocales } from "./catalogs"
 import { messages as enUS } from "./en-US"
@@ -20,3 +19,20 @@ describe("media locale catalogs", () => {
     })
   })
 })
+
+function expectCompleteCatalogs({
+  catalogs,
+  locales,
+  messageIds,
+}: {
+  catalogs: Readonly<Record<string, Readonly<Record<string, string>>>>
+  locales: readonly string[]
+  messageIds: readonly string[]
+}) {
+  expect(Object.keys(catalogs)).toEqual([...locales])
+
+  const expectedIds = new Set(messageIds)
+  for (const messages of Object.values(catalogs)) {
+    expect(new Set(Object.keys(messages))).toEqual(expectedIds)
+  }
+}

packages/media/src/locales/catalogs.ts

@@ -0,0 +1,16 @@
+import type { mediaMessages } from "../messages"
+
+export const mediaCatalogLocales = ["en-US", "zh-Hans"] as const
+
+interface MessageDescriptorMap {
+  readonly [key: string]: {
+    readonly id: string
+  }
+}
+
+type MessageId<T extends MessageDescriptorMap> = T[keyof T]["id"]
+
+export type MediaCatalogLocale = (typeof mediaCatalogLocales)[number]
+export type MediaMessageCatalog = Readonly<
+  Record<MessageId<typeof mediaMessages>, string>
+>

packages/media/src/styles/globals.css

@@ -0,0 +1 @@
+@source "../";

packages/media/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "paths": {
+      "@workspace/i18n": ["../i18n/src/index.ts"],
+      "@workspace/ui/*": ["../ui/src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}