@meith/theme-raidframe 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-raidframe",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "A gaming theme for Meith — guild, raid and match boards — built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.15.0",
-    "@meith/ui": "^0.15.0",
-    "@meith/theme-kit": "^0.15.0"
+    "@meith/theme-kit": "^0.17.0",
+    "@meith/theme-default": "^0.17.0",
+    "@meith/ui": "^0.17.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -164,6 +164,7 @@ export function postActionsCopy(t: Translator): SlotCopy {
   return copyFor(t, [
     'raidframe.postActions.quote',
     'raidframe.postActions.edit',
+    'raidframe.postActions.history',
     'raidframe.postActions.restore',
     'raidframe.postActions.rate',
     'raidframe.postActions.report',

package/src/messages/en.json

@@ -73,6 +73,7 @@
   "raidframe.panelPage.panelLabel.usercp": "your control panel",
   "raidframe.postActions.ariaLabel": "Post actions",
   "raidframe.postActions.edit": "edit",
+  "raidframe.postActions.history": "history",
   "raidframe.postActions.moderate": "moderate",
   "raidframe.postActions.quote": "quote",
   "raidframe.postActions.rate": "rate",

package/src/slots/editor-toolbar.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import {
+  applyEditorTag,
+  type EditorTag,
+  type EditorToolbarModel,
+  type SlotCopy,
+} from '@meith/theme-kit'
+
+import { RULE } from '../shared'
+
+const GLYPHS: Readonly<Record<EditorTag, string>> = {
+  bold: 'B',
+  italic: 'I',
+  strikethrough: 'S',
+  link: 'LINK',
+  quote: 'QUOTE',
+  code: 'CODE',
+  spoiler: 'SPLR',
+  bulletedList: 'UL',
+  numberedList: 'OL',
+  heading: 'H',
+}
+
+const BUTTON =
+  'inline-flex min-w-8 items-center justify-center border border-border bg-secondary px-2 py-1.5 font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.1em] text-secondary-foreground hover:border-primary/70 hover:text-primary'
+
+function runTag(textareaId: string, tag: EditorTag, placeholder: string | null): void {
+  const field = document.getElementById(textareaId)
+  if (field instanceof HTMLTextAreaElement) applyEditorTag(field, tag, placeholder)
+}
+
+export function EditorToolbar({
+  textareaId,
+  groupLabel,
+  buttons,
+  attachment,
+}: EditorToolbarModel & { copy: SlotCopy }) {
+  return (
+    <>
+      <div role="group" aria-label={groupLabel} className="flex flex-wrap gap-1 px-4 py-3">
+        {buttons.map((button) => (
+          <button
+            key={button.tag}
+            type="button"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => runTag(textareaId, button.tag, button.placeholder)}
+            title={button.title}
+            aria-label={button.label}
+            {...(button.keyShortcut === null ? {} : { 'aria-keyshortcuts': button.keyShortcut })}
+            className={BUTTON}
+          >
+            <span aria-hidden="true">{GLYPHS[button.tag]}</span>
+          </button>
+        ))}
+
+        {attachment !== null && (
+          <button
+            type="button"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => document.getElementById(attachment.inputId)?.click()}
+            title={attachment.label}
+            aria-label={attachment.label}
+            className={BUTTON}
+          >
+            <span aria-hidden="true">{attachment.label}</span>
+          </button>
+        )}
+      </div>
+      <div className={RULE} aria-hidden="true" />
+    </>
+  )
+}

package/src/slots/post-actions.tsx

@@ -14,12 +14,13 @@ export function PostActions({
   const items = [
     { href: actions.quoteHref, label: c('quote') },
     { href: actions.editHref, label: c('edit') },
+    { href: actions.historyHref, label: c('history') },
     { href: actions.restoreHref, label: c('restore') },
     { href: actions.rateHref, label: c('rate') },
     { href: actions.reportHref, label: c('report') },
     { href: actions.warnHref, label: c('warn') },
     { href: actions.moderateHref, label: c('moderate') },
-  ].filter((item): item is { href: string; label: string } => item.href !== null)
+  ].filter((item): item is { href: string; label: string } => item.href != null)
 
   if (items.length === 0 && children === undefined) return null
 

package/src/slots/quick-reply.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import type { QuickReplyModel, SlotCopy } from '@meith/theme-kit'
+
+export function QuickReply({ placeholder, children }: QuickReplyModel & { copy: SlotCopy }) {
+  if (children === undefined) return null
+
+  return <section aria-label={placeholder}>{children}</section>
+}

package/src/theme.ts

@@ -40,6 +40,7 @@ import { BoardIndex } from './slots/board-index'
 import { BoardStats } from './slots/board-stats'
 import { CategoryBlock } from './slots/category-block'
 import { DiscoveryView } from './slots/discovery-view'
+import { EditorToolbar } from './slots/editor-toolbar'
 import { ErrorNotice } from './slots/error-notice'
 import { Footer } from './slots/footer'
 import { ForumDisplay } from './slots/forum-display'
@@ -58,6 +59,7 @@ import { PanelShell } from './slots/panel-shell'
 import { PostActions } from './slots/post-actions'
 import { PostBit } from './slots/post-bit'
 import { PostForm } from './slots/post-form'
+import { QuickReply } from './slots/quick-reply'
 import { RedirectNotice } from './slots/redirect-notice'
 import { SearchForm } from './slots/search-form'
 import { SearchResults } from './slots/search-results'
@@ -97,8 +99,10 @@ export const raidframeTheme = defineTheme({
     ThreadView,
     PostBit,
     PostActions,
+    QuickReply,
 
     PostForm,
+    EditorToolbar,
     MemberProfile,
     SearchForm,
     SearchResults,