@wikex/admin-kit 0.2.0 → 0.2.1

package/dist/runtimeConfig-BwjQepcW.d.ts

@@ -0,0 +1,30 @@
+type BlockPickerScope = 'page' | 'post';
+type BlockPickerOption = {
+    description: string;
+    image?: string;
+    label: string;
+    payloadLabel?: string;
+    slug: string;
+};
+type VisualEditorDocumentTarget = {
+    collection: string;
+    documentID: string;
+    kind: 'collection';
+} | {
+    global: string;
+    kind: 'global';
+};
+type VisualEditorScope = 'content' | 'footer' | 'header';
+type VisualEditorRoute = {
+    documentTarget: VisualEditorDocumentTarget | null;
+    scope: VisualEditorScope;
+    type: 'collection' | 'global';
+};
+type LivePreviewRuntimeConfig = {
+    getVisualEditorRoute: (pathname: string) => VisualEditorRoute | null;
+    pageBlocks: readonly BlockPickerOption[];
+    postBlocks: readonly BlockPickerOption[];
+};
+declare const configureLivePreview: (config: LivePreviewRuntimeConfig) => void;
+
+export { type BlockPickerOption as B, type LivePreviewRuntimeConfig as L, type VisualEditorDocumentTarget as V, type BlockPickerScope as a, type VisualEditorRoute as b, type VisualEditorScope as c, configureLivePreview as d };

package/dist/starter-client.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WikexStarter } from './starter.js';
+import '@wikex/content-kit';
+import './runtimeConfig-BwjQepcW.js';
+import './project.js';
+
+type LivePreviewConfig = WikexStarter['livePreview'] & {
+    getVisualEditorRoute: WikexStarter['getVisualEditorRoute'];
+};
+/** Configure and return the shared client-side Live Preview provider for a Wikex starter. */
+declare const createWikexLivePreviewAdapter: ({ brand, getVisualEditorRoute, pageBlocks, postBlocks, }: LivePreviewConfig) => ({ children }: {
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+export { createWikexLivePreviewAdapter };

package/dist/starter-client.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  LivePreviewEditor_default,
+  configureLivePreview
+} from "./chunk-IL2CUCDG.js";
+import "./chunk-BUD6BMFV.js";
+import "./chunk-LP22Y3NO.js";
+import {
+  configureAdminBrand
+} from "./chunk-XGKGKCQ6.js";
+
+// src/starter/client.tsx
+var createWikexLivePreviewAdapter = ({
+  brand,
+  getVisualEditorRoute,
+  pageBlocks,
+  postBlocks
+}) => {
+  configureAdminBrand({ logo: { alt: brand.name, ...brand.logo }, siteName: brand.name });
+  configureLivePreview({ getVisualEditorRoute, pageBlocks, postBlocks });
+  return LivePreviewEditor_default;
+};
+export {
+  createWikexLivePreviewAdapter
+};

package/dist/starter.d.ts

@@ -0,0 +1,40 @@
+import { createContentModule, ContentModuleOptions } from '@wikex/content-kit';
+import { b as VisualEditorRoute, B as BlockPickerOption } from './runtimeConfig-BwjQepcW.js';
+import { defineWikexProject } from './project.js';
+
+type WikexStarterBrand = {
+    description: string;
+    logo: {
+        height: number;
+        url: string;
+        width: number;
+    };
+    name: string;
+};
+type WikexStarterOptions = {
+    brand: WikexStarterBrand;
+    content: ContentModuleOptions;
+    globals?: Readonly<Record<string, 'content' | 'footer' | 'header'>>;
+    id: string;
+    modules?: readonly string[];
+    provider: string;
+};
+type WikexStarter = {
+    collections: ReturnType<typeof createContentModule>['collections'];
+    getVisualEditorRoute: (pathname: string) => VisualEditorRoute | null;
+    livePreview: {
+        brand: WikexStarterBrand;
+        pageBlocks: readonly BlockPickerOption[];
+        postBlocks: readonly BlockPickerOption[];
+    };
+    plugins: ReturnType<typeof createContentModule>['plugins'];
+    project: ReturnType<typeof defineWikexProject>;
+};
+/**
+ * One factory for the conventional Wikex Payload setup. The consuming project still owns
+ * its visual block components and frontend renderer, but no longer has to wire plugins,
+ * content schema, branding and preview routing independently.
+ */
+declare const createWikexStarter: (options: WikexStarterOptions) => WikexStarter;
+
+export { type WikexStarter, type WikexStarterBrand, type WikexStarterOptions, createWikexStarter };

package/dist/starter.js

@@ -0,0 +1,62 @@
+import {
+  adminExperiencePlugin,
+  wikexAdminPlugin
+} from "./chunk-7FEACJUN.js";
+import {
+  createVisualEditorRouteResolver,
+  defineWikexProject
+} from "./chunk-JJLHSZ3T.js";
+
+// src/starter.ts
+import { createContentModule } from "@wikex/content-kit";
+var getLabel = (block) => {
+  if (typeof block.labels === "object" && block.labels && "singular" in block.labels) {
+    const singular = block.labels.singular;
+    if (typeof singular === "string") return singular;
+  }
+  return block.slug;
+};
+var isStarterBlock = (block) => typeof block === "object" && block !== null && "slug" in block && typeof block.slug === "string";
+var toBlockPickerOptions = (blocks) => {
+  if (!Array.isArray(blocks)) return [];
+  return blocks.filter(isStarterBlock).map((block) => {
+    const label = getLabel(block);
+    return { description: label, label, payloadLabel: label, slug: block.slug };
+  });
+};
+var createWikexStarter = (options) => {
+  const seo = options.content.seo === void 0 ? { siteName: options.brand.name } : options.content.seo;
+  const content = createContentModule({ ...options.content, seo });
+  const collections = [content.pageSlug, content.postSlug].filter(
+    (slug) => Boolean(slug)
+  );
+  const getVisualEditorRoute = createVisualEditorRouteResolver({
+    collections,
+    globals: options.globals
+  });
+  const project = defineWikexProject({
+    brand: options.brand,
+    id: options.id,
+    modules: options.modules ?? ["website", "blog"]
+  });
+  const pageBlocks = toBlockPickerOptions(
+    options.content.page === false ? void 0 : options.content.page?.blocks
+  );
+  const postBlocks = toBlockPickerOptions(
+    options.content.post === false ? void 0 : options.content.post?.blocks
+  );
+  return {
+    collections: content.collections,
+    getVisualEditorRoute,
+    livePreview: { brand: options.brand, pageBlocks, postBlocks },
+    plugins: [
+      adminExperiencePlugin,
+      ...content.plugins,
+      wikexAdminPlugin({ components: { provider: options.provider } })
+    ],
+    project
+  };
+};
+export {
+  createWikexStarter
+};

package/dist/text-style-runtime.d.ts

@@ -0,0 +1,5 @@
+declare const TextStyleRuntime: ({ styles }: {
+    styles?: unknown;
+}) => null;
+
+export { TextStyleRuntime };

package/dist/text-style-runtime.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  TextStyleRuntime
+} from "./chunk-YMBJCWN3.js";
+import "./chunk-BUD6BMFV.js";
+export {
+  TextStyleRuntime
+};

package/dist/text-styles.d.ts

@@ -0,0 +1,86 @@
+declare const TEXT_FONT_OPTIONS: readonly [{
+    readonly css: "";
+    readonly label: "Mặc định";
+    readonly value: "default";
+}, {
+    readonly css: "var(--font-manrope), sans-serif";
+    readonly label: "Manrope";
+    readonly value: "manrope";
+}, {
+    readonly css: "var(--font-inter), sans-serif";
+    readonly label: "Inter";
+    readonly value: "inter";
+}, {
+    readonly css: "var(--font-roboto), sans-serif";
+    readonly label: "Roboto";
+    readonly value: "roboto";
+}, {
+    readonly css: "var(--font-montserrat), sans-serif";
+    readonly label: "Montserrat";
+    readonly value: "montserrat";
+}, {
+    readonly css: "var(--font-lora), serif";
+    readonly label: "Lora";
+    readonly value: "lora";
+}, {
+    readonly css: "var(--font-playfair-display), serif";
+    readonly label: "Playfair Display";
+    readonly value: "playfair-display";
+}];
+declare const TEXT_LINE_HEIGHT_OPTIONS: readonly [{
+    readonly css: "";
+    readonly label: "Mặc định";
+    readonly value: "default";
+}, {
+    readonly css: "0.9";
+    readonly label: "Rất chặt · 0.9";
+    readonly value: "0.9";
+}, {
+    readonly css: "1";
+    readonly label: "Chặt · 1.0";
+    readonly value: "1";
+}, {
+    readonly css: "1.15";
+    readonly label: "Gọn · 1.15";
+    readonly value: "1.15";
+}, {
+    readonly css: "1.35";
+    readonly label: "Tiêu chuẩn · 1.35";
+    readonly value: "1.35";
+}, {
+    readonly css: "1.5";
+    readonly label: "Thoáng · 1.5";
+    readonly value: "1.5";
+}, {
+    readonly css: "1.7";
+    readonly label: "Rộng · 1.7";
+    readonly value: "1.7";
+}];
+type TextFontFamily = (typeof TEXT_FONT_OPTIONS)[number]['value'];
+type TextLineHeight = (typeof TEXT_LINE_HEIGHT_OPTIONS)[number]['value'];
+type TextStyleValue = {
+    fontFamily?: TextFontFamily;
+    lineHeight?: TextLineHeight;
+    /** Percentage of the containing block, written by the canvas resize handles. */
+    width?: number;
+    /** Percentage offset from the containing block's left content edge. */
+    widthOffset?: number;
+};
+type TextStyleMap = Record<string, TextStyleValue>;
+declare const EDITABLE_INTERACTIVE_SELECTOR: string;
+declare const EDITABLE_PREVIEW_SELECTOR: string;
+declare const isSyntheticElementStyleKey: (value: string) => boolean;
+declare const getEditableElementStyleKey: (element: HTMLElement) => string;
+declare const normalizeTextStyleValue: (value: unknown) => TextStyleValue;
+declare const normalizeTextStyleMap: (value: unknown) => TextStyleMap;
+declare const getTextStyleCSS: (value: TextStyleValue) => {
+    boxSizing?: "border-box";
+    fontFamily?: string;
+    lineHeight?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    maxWidth?: string;
+    width?: string;
+};
+
+export { EDITABLE_INTERACTIVE_SELECTOR, EDITABLE_PREVIEW_SELECTOR, TEXT_FONT_OPTIONS, TEXT_LINE_HEIGHT_OPTIONS, type TextFontFamily, type TextLineHeight, type TextStyleMap, type TextStyleValue, getEditableElementStyleKey, getTextStyleCSS, isSyntheticElementStyleKey, normalizeTextStyleMap, normalizeTextStyleValue };

package/dist/text-styles.js

@@ -0,0 +1,22 @@
+import {
+  EDITABLE_INTERACTIVE_SELECTOR,
+  EDITABLE_PREVIEW_SELECTOR,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  getEditableElementStyleKey,
+  getTextStyleCSS,
+  isSyntheticElementStyleKey,
+  normalizeTextStyleMap,
+  normalizeTextStyleValue
+} from "./chunk-BUD6BMFV.js";
+export {
+  EDITABLE_INTERACTIVE_SELECTOR,
+  EDITABLE_PREVIEW_SELECTOR,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  getEditableElementStyleKey,
+  getTextStyleCSS,
+  isSyntheticElementStyleKey,
+  normalizeTextStyleMap,
+  normalizeTextStyleValue
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikex/admin-kit",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Reusable Payload CMS admin shell, visual editor and typography tools for Wikex projects",
   "license": "UNLICENSED",
   "private": false,
@@ -9,7 +9,8 @@
     "**/*.scss"
   ],
   "files": [
-    "src",
+    "dist",
+    "src/styles",
     "CHANGELOG.md",
     "README.md",
     "RELEASING.md"
@@ -19,26 +20,26 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@wikex/content-kit": "^0.1.0"
+    "@wikex/content-kit": "^0.1.1"
   },
   "exports": {
-    ".": "./src/index.ts",
-    "./admin/before-login": "./src/admin/BeforeLogin.tsx",
-    "./admin/brand": "./src/admin/Brand.tsx",
-    "./admin/header": "./src/admin/Header.tsx",
-    "./admin/logout-button": "./src/admin/LogoutButton.tsx",
-    "./admin/nav": "./src/admin/Nav.tsx",
-    "./admin/theme-toggle": "./src/admin/ThemeToggle.tsx",
-    "./admin/view-site": "./src/admin/ViewSite.tsx",
-    "./live-preview": "./src/live-preview/index.ts",
-    "./project": "./src/project.ts",
-    "./rich-text": "./src/rich-text/index.ts",
-    "./rich-text/client": "./src/rich-text/client.tsx",
-    "./starter": "./src/starter.ts",
-    "./starter/client": "./src/starter/client.tsx",
+    ".": "./dist/index.js",
+    "./admin/before-login": "./dist/admin/before-login.js",
+    "./admin/brand": "./dist/admin/brand.js",
+    "./admin/header": "./dist/admin/header.js",
+    "./admin/logout-button": "./dist/admin/logout-button.js",
+    "./admin/nav": "./dist/admin/nav.js",
+    "./admin/theme-toggle": "./dist/admin/theme-toggle.js",
+    "./admin/view-site": "./dist/admin/view-site.js",
+    "./live-preview": "./dist/live-preview.js",
+    "./project": "./dist/project.js",
+    "./rich-text": "./dist/rich-text.js",
+    "./rich-text/client": "./dist/rich-text-client.js",
+    "./starter": "./dist/starter.js",
+    "./starter/client": "./dist/starter-client.js",
     "./styles": "./src/styles/admin.scss",
-    "./text-style-runtime": "./src/TextStyleRuntime.tsx",
-    "./text-styles": "./src/textStyles.ts"
+    "./text-style-runtime": "./dist/text-style-runtime.js",
+    "./text-styles": "./dist/text-styles.js"
   },
   "peerDependencies": {
     "@lexical/react": ">=0.41.0",
@@ -51,5 +52,8 @@
     "payload": ">=3.88.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
+  },
+  "scripts": {
+    "build": "tsup"
   }
 }

package/src/TextStyleRuntime.tsx

@@ -1,90 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-import {
-  EDITABLE_PREVIEW_SELECTOR,
-  getEditableElementStyleKey,
-  getTextStyleCSS,
-  normalizeTextStyleMap,
-} from './textStyles'
-
-type OriginalStyle = {
-  boxSizing: string
-  fontFamily: string
-  lineHeight: string
-  marginLeft: string
-  marginRight: string
-  maxWidth: string
-  width: string
-}
-
-export const TextStyleRuntime = ({ styles }: { styles?: unknown }) => {
-  useEffect(() => {
-    const normalizedStyles = normalizeTextStyleMap(styles)
-    const originals = new Map<HTMLElement, OriginalStyle>()
-    let applyFrame = 0
-
-    const applyStyles = () => {
-      const fields = new Set(
-        document.querySelectorAll<HTMLElement>(`[data-wikex-field],${EDITABLE_PREVIEW_SELECTOR}`),
-      )
-
-      for (const element of fields) {
-        const fieldPath = element.dataset.wikexField || getEditableElementStyleKey(element)
-        if (!fieldPath || !normalizedStyles[fieldPath]) continue
-
-        if (!originals.has(element)) {
-          originals.set(element, {
-            boxSizing: element.style.boxSizing,
-            fontFamily: element.style.fontFamily,
-            lineHeight: element.style.lineHeight,
-            marginLeft: element.style.marginLeft,
-            marginRight: element.style.marginRight,
-            maxWidth: element.style.maxWidth,
-            width: element.style.width,
-          })
-        }
-
-        const style = getTextStyleCSS(normalizedStyles[fieldPath])
-        element.style.boxSizing = style.boxSizing || ''
-        element.style.fontFamily = style.fontFamily || ''
-        element.style.lineHeight = style.lineHeight || ''
-        element.style.marginLeft = style.marginLeft || ''
-        element.style.marginRight = style.marginRight || ''
-        element.style.maxWidth = style.maxWidth || ''
-        element.style.width = style.width || ''
-      }
-    }
-
-    const scheduleApplyStyles = () => {
-      if (applyFrame) return
-
-      applyFrame = window.requestAnimationFrame(() => {
-        applyFrame = 0
-        applyStyles()
-      })
-    }
-
-    applyStyles()
-    const observer = new MutationObserver(scheduleApplyStyles)
-    observer.observe(document.body, { childList: true, subtree: true })
-
-    return () => {
-      observer.disconnect()
-      window.cancelAnimationFrame(applyFrame)
-      for (const [element, original] of originals) {
-        if (!element.isConnected) continue
-        element.style.boxSizing = original.boxSizing
-        element.style.fontFamily = original.fontFamily
-        element.style.lineHeight = original.lineHeight
-        element.style.marginLeft = original.marginLeft
-        element.style.marginRight = original.marginRight
-        element.style.maxWidth = original.maxWidth
-        element.style.width = original.width
-      }
-    }
-  }, [styles])
-
-  return null
-}

package/src/admin/BeforeLogin.tsx

@@ -1,19 +0,0 @@
-'use client'
-
-import React from 'react'
-
-import { useAdminBrand } from './useAdminBrand'
-
-const BeforeLogin: React.FC = () => {
-  const { siteName } = useAdminBrand()
-
-  return (
-    <div className="admin-login-intro">
-      <span className="admin-login-intro__eyebrow">{siteName} · Trung tâm nội dung</span>
-      <h1>Chào mừng trở lại.</h1>
-      <p>Đăng nhập để quản lý nội dung, hình ảnh và xuất bản của {siteName}.</p>
-    </div>
-  )
-}
-
-export default BeforeLogin

package/src/admin/Brand.tsx

@@ -1,74 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import React from 'react'
-
-import { useAdminBrand } from './useAdminBrand'
-
-export type AdminBrandAsset = {
-  alt: string
-  height: number
-  url: string
-  width: number
-}
-
-const BrandLogo = ({
-  asset,
-  className,
-  height,
-  maxWidth,
-}: {
-  asset: AdminBrandAsset
-  className?: string
-  height: number
-  maxWidth: number
-  siteName: string
-}) => (
-  <span
-    className={['brand-logo', className].filter(Boolean).join(' ')}
-    style={{ alignItems: 'center', display: 'inline-flex', height, maxWidth }}
-  >
-    <Image
-      alt=""
-      height={asset.height}
-      src={asset.url}
-      style={{ height: '100%', maxWidth: '100%', objectFit: 'contain', width: 'auto' }}
-      unoptimized
-      width={asset.width}
-    />
-  </span>
-)
-
-export const AdminIcon: React.FC = () => {
-  const brand = useAdminBrand()
-
-  return (
-    <span className="aurea-brand aurea-brand--icon">
-      <BrandLogo
-        asset={brand.logo}
-        className="aurea-brand__image"
-        height={32}
-        maxWidth={32}
-        siteName={brand.siteName}
-      />
-    </span>
-  )
-}
-
-export const AdminLogo: React.FC = () => {
-  const brand = useAdminBrand()
-
-  return (
-    <span aria-label={brand.siteName} className="aurea-brand aurea-brand--logo" role="img">
-      <BrandLogo
-        asset={brand.logo}
-        className="aurea-brand__image"
-        height={42}
-        maxWidth={190}
-        siteName={brand.siteName}
-      />
-    </span>
-  )
-}
-
-export { configureAdminBrand, useAdminBrand, type AdminBrandSettings } from './useAdminBrand'

package/src/admin/Header.tsx

@@ -1,87 +0,0 @@
-'use client'
-
-import { Link, useAuth, useConfig, useNav } from '@payloadcms/ui'
-import { Menu, Settings2 } from 'lucide-react'
-import { formatAdminURL } from 'payload/shared'
-import React from 'react'
-
-import { AdminIcon } from './Brand'
-import AdminThemeToggle from './ThemeToggle'
-import AdminViewSite from './ViewSite'
-
-type AdminUser = {
-  email?: string
-  name?: string
-}
-
-const getInitials = (name?: string, email?: string) => {
-  const source = name?.trim() || email?.split('@')[0] || 'AD'
-
-  return source
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((part) => part.charAt(0).toUpperCase())
-    .join('')
-}
-
-const AdminHeader = () => {
-  const { user } = useAuth<AdminUser>()
-  const { setNavOpen } = useNav()
-  const {
-    config: {
-      admin: { routes: adminRoutes },
-      routes: { admin: adminRoute },
-    },
-  } = useConfig()
-
-  const userLabel = user?.name?.trim() || user?.email?.split('@')[0] || 'Quản trị viên'
-  const initials = getInitials(user?.name, user?.email)
-
-  return (
-    <header className="minimal-admin-header">
-      <div className="minimal-admin-header__left">
-        <button
-          aria-label="Mở menu quản trị"
-          className="minimal-admin-header__menu"
-          onClick={() => setNavOpen(true)}
-          type="button"
-        >
-          <Menu aria-hidden="true" />
-        </button>
-        <Link
-          aria-label="Về dashboard"
-          className="minimal-admin-header__mobile-brand"
-          href={adminRoute}
-          prefetch={false}
-        >
-          <AdminIcon />
-        </Link>
-      </div>
-
-      <div className="minimal-admin-header__actions">
-        <AdminViewSite />
-        <AdminThemeToggle />
-        <Link
-          aria-label={`Mở tài khoản ${userLabel}`}
-          className="minimal-admin-header__settings"
-          href={formatAdminURL({ adminRoute, path: adminRoutes.account })}
-          prefetch={false}
-          title="Cài đặt tài khoản"
-        >
-          <Settings2 aria-hidden="true" />
-        </Link>
-        <Link
-          aria-label={`Mở tài khoản ${userLabel}`}
-          className="minimal-admin-header__account"
-          href={formatAdminURL({ adminRoute, path: adminRoutes.account })}
-          prefetch={false}
-          title={userLabel}
-        >
-          <span>{initials}</span>
-        </Link>
-      </div>
-    </header>
-  )
-}
-
-export default AdminHeader