@xforge-dev/forge-kit 0.14.0 → 0.16.0

package/dist/account-url.d.ts

@@ -1,5 +1,5 @@
 export declare const ACCOUNT_ORIGIN: string;
-export type AccountPath = '/' | '/login' | '/register' | '/logout' | '/reset-password';
+export type AccountPath = '/' | '/login' | '/register' | '/logout' | '/reset-password' | '/privacy' | '/terms';
 export declare function accountUrl(path: AccountPath, opts?: {
     next?: string;
 }, origin?: string): string;

package/dist/client.d.ts

@@ -10,3 +10,5 @@ export { ForgeHeader, ForgeAvatar, ForgePanelSection, ForgePanelItem, ForgeSwitc
 export * from './theme.js';
 export { ForgeLogo, type ForgeLogoProps } from './forge-logo.js';
 export { ForgeSupportButton, BUY_ME_A_COFFEE_URL, BUY_ME_A_COFFEE_BUTTON, FORGE_SPONSOR_TIERS, ForgeSupporterBadge, type ForgeSupporterTier, type ForgeSupportButtonProps, } from './support-button.js';
+export { ForgeIgnInput, FORGE_ACCENTED_LETTERS, FORGE_NO_AUTOFILL, type ForgeIgnInputProps, } from './ign-input.js';
+export { ForgeFooter, type ForgeFooterProps } from './forge-footer.js';

package/dist/client.js

@@ -11,3 +11,5 @@ export { ForgeHeader, ForgeAvatar, ForgePanelSection, ForgePanelItem, ForgeSwitc
 export * from './theme.js';
 export { ForgeLogo } from './forge-logo.js';
 export { ForgeSupportButton, BUY_ME_A_COFFEE_URL, BUY_ME_A_COFFEE_BUTTON, FORGE_SPONSOR_TIERS, ForgeSupporterBadge, } from './support-button.js';
+export { ForgeIgnInput, FORGE_ACCENTED_LETTERS, FORGE_NO_AUTOFILL, } from './ign-input.js';
+export { ForgeFooter } from './forge-footer.js';

package/dist/forge-footer.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type ForgeFooterProps = {
+    /** The app's release version, e.g. `process.env.APP_VERSION`. */
+    version?: string;
+    /** Short commit SHA of the build. */
+    commit?: string;
+    /** The app's docs page; omitted, no Docs link. */
+    docsHref?: string;
+    /** Extra links, after Terms. */
+    children?: ReactNode;
+    /** Width of the footer's inner row; defaults to `max-w-6xl`. */
+    containerClassName?: string;
+};
+/** The family footer: copyright, docs, the shared privacy policy and terms, and the build. */
+export declare function ForgeFooter({ version, commit, docsHref, children, containerClassName }: ForgeFooterProps): import("react").JSX.Element;

package/dist/forge-footer.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import Link from 'next/link.js';
+import { accountUrl } from './account-url.js';
+const linkClass = 'hover:text-foreground underline-offset-4 hover:underline';
+/** The family footer: copyright, docs, the shared privacy policy and terms, and the build. */
+export function ForgeFooter({ version, commit, docsHref, children, containerClassName = 'max-w-6xl' }) {
+    return (_jsx("footer", { className: "w-full border-t border-border/40 bg-background/95", children: _jsxs("div", { className: `mx-auto flex min-h-14 flex-wrap items-center justify-center gap-x-4 gap-y-1 px-4 py-3 text-sm text-muted-foreground ${containerClassName}`, children: [_jsxs("p", { children: ["\u00A9 ", new Date().getFullYear(), " xForge"] }), docsHref && _jsx(Link, { href: docsHref, className: linkClass, children: "Docs" }), _jsx("a", { href: accountUrl('/privacy'), className: linkClass, children: "Privacy" }), _jsx("a", { href: accountUrl('/terms'), className: linkClass, children: "Terms" }), children, (version || commit) && (_jsxs("p", { children: [version && `v${version}`, commit && _jsxs("span", { className: "font-mono text-xs", children: [" (", commit, ")"] })] }))] }) }));
+}

package/dist/ign-input.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentProps } from 'react';
+/** Accented letters MapleStory names allow, for names like Sïnfùl that are hard to type. */
+export declare const FORGE_ACCENTED_LETTERS: string[];
+/**
+ * Spread onto text fields that aren't credentials. Browsers ignore autocomplete="off" for anything that looks like a
+ * login, so the common password managers get their own opt-outs: 1Password, LastPass, Bitwarden and Dashlane.
+ */
+export declare const FORGE_NO_AUTOFILL: {
+    readonly autoComplete: "off";
+    readonly 'data-1p-ignore': "true";
+    readonly 'data-lpignore': "true";
+    readonly 'data-bwignore': "true";
+    readonly 'data-form-type': "other";
+};
+export type ForgeIgnInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Names used before on this device, shown as chips under the field. Picking one hands it to `onPick`. */
+    history?: string[];
+    onPick?: (name: string) => void;
+    /** Shows a remove button on each history chip. */
+    onForget?: (name: string) => void;
+    /** Classes for the outer wrapper (the field plus history chips); `className` goes on the input. */
+    wrapperClassName?: string;
+};
+/**
+ * A character name field with a picker for the accented letters MapleStory names allow, and optionally the names
+ * used before, so a name never has to be typed twice. Styled like the family's 36px inputs.
+ */
+export declare function ForgeIgnInput({ value, onValueChange, history, onPick, onForget, className, wrapperClassName, onSelect, onBlur, ...inputProps }: ForgeIgnInputProps): import("react").JSX.Element;

package/dist/ign-input.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Popover from '@radix-ui/react-popover';
+import { useRef, useState } from 'react';
+import { ArrowBigUp, X } from 'lucide-react';
+/** Accented letters MapleStory names allow, for names like Sïnfùl that are hard to type. */
+export const FORGE_ACCENTED_LETTERS = 'àáâãäåæçèéêëìíîïðñòóôõöøœùúûüýÿþß'.split('');
+/**
+ * Spread onto text fields that aren't credentials. Browsers ignore autocomplete="off" for anything that looks like a
+ * login, so the common password managers get their own opt-outs: 1Password, LastPass, Bitwarden and Dashlane.
+ */
+export const FORGE_NO_AUTOFILL = {
+    autoComplete: 'off',
+    'data-1p-ignore': 'true',
+    'data-lpignore': 'true',
+    'data-bwignore': 'true',
+    'data-form-type': 'other',
+};
+/**
+ * A character name field with a picker for the accented letters MapleStory names allow, and optionally the names
+ * used before, so a name never has to be typed twice. Styled like the family's 36px inputs.
+ */
+export function ForgeIgnInput({ value, onValueChange, history = [], onPick, onForget, className = '', wrapperClassName = '', onSelect, onBlur, ...inputProps }) {
+    const inputRef = useRef(null);
+    // Where the caret was before the picker took focus, so a letter lands where it was meant to.
+    const selectionRef = useRef(null);
+    const [upper, setUpper] = useState(false);
+    const remember = () => {
+        const input = inputRef.current;
+        if (input)
+            selectionRef.current = [input.selectionStart ?? value.length, input.selectionEnd ?? value.length];
+    };
+    const insert = (letter) => {
+        const [start, end] = selectionRef.current ?? [value.length, value.length];
+        onValueChange(value.slice(0, start) + letter + value.slice(end));
+        const caret = start + letter.length;
+        selectionRef.current = [caret, caret];
+        requestAnimationFrame(() => {
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(caret, caret);
+        });
+    };
+    const recent = onPick ? history.filter((n) => n.toLowerCase() !== value.trim().toLowerCase()) : [];
+    return (_jsxs("div", { className: `w-full min-w-0 space-y-2 ${wrapperClassName}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", { ref: inputRef, value: value, onChange: (e) => onValueChange(e.target.value), onSelect: (e) => { remember(); onSelect?.(e); }, onBlur: (e) => { remember(); onBlur?.(e); }, ...FORGE_NO_AUTOFILL, spellCheck: false, className: `flex h-9 w-full rounded-md border border-input bg-transparent py-1 pl-3 pr-11 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ${className}`, ...inputProps }), _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { type: "button", disabled: inputProps.disabled, className: "absolute right-0.5 top-1/2 inline-flex h-8 w-9 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", "aria-label": "Insert an accented letter", title: "Accented letters", children: _jsx("span", { "aria-hidden": true, className: "text-base leading-none", children: "\u00EF" }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "end", sideOffset: 4, className: "z-50 w-72 rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none", onOpenAutoFocus: (e) => e.preventDefault(), onFocusOutside: (e) => e.preventDefault(), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium", children: "Accented letters" }), _jsxs("button", { type: "button", "aria-pressed": upper, onClick: () => setUpper((u) => !u), className: `inline-flex h-8 items-center gap-1 rounded-md border px-3 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${upper ? 'border-primary bg-primary text-primary-foreground' : 'hover:bg-accent hover:text-accent-foreground'}`, children: [_jsx(ArrowBigUp, { className: "h-4 w-4" }), "Caps"] })] }), _jsx("div", { className: "grid grid-cols-8 gap-1", role: "group", "aria-label": "Accented letters", children: FORGE_ACCENTED_LETTERS.map((letter) => {
+                                                // ß and ÿ have no single-letter capital in names, so they stay as they are.
+                                                const shown = upper && letter !== 'ß' && letter !== 'ÿ' ? letter.toUpperCase() : letter;
+                                                return (_jsx("button", { type: "button", onClick: () => insert(shown), className: "h-8 rounded-md border text-base hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring", children: shown }, letter));
+                                            }) })] }) })] })] }), recent.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Recent:" }), recent.map((name) => (_jsxs("span", { className: "inline-flex items-center rounded-full border text-xs", children: [_jsx("button", { type: "button", onClick: () => onPick?.(name), className: `py-1 pl-2.5 hover:text-primary focus-visible:outline-2 focus-visible:outline-ring ${onForget ? 'rounded-l-full pr-1.5' : 'rounded-full pr-2.5'}`, title: `Use ${name}`, children: name }), onForget && (_jsx("button", { type: "button", onClick: () => onForget(name), "aria-label": `Remove ${name} from recent names`, className: "rounded-r-full py-1 pl-0.5 pr-2 text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring", children: _jsx(X, { className: "h-3 w-3" }) }))] }, name)))] }))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xforge-dev/forge-kit",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Shared auth, app registry and UI for xForge apps",
   "license": "MIT",
   "repository": {
@@ -39,6 +39,7 @@
   "peerDependencies": {
     "@radix-ui/react-dialog": "^1",
     "@radix-ui/react-dropdown-menu": "^2",
+    "@radix-ui/react-popover": "^1",
     "@supabase/ssr": "^0.12",
     "@supabase/supabase-js": "^2",
     "lucide-react": "^1",
@@ -51,6 +52,7 @@
   "devDependencies": {
     "@radix-ui/react-dialog": "^1.3.1",
     "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-popover": "^1.3.1",
     "@supabase/ssr": "^0.12.7",
     "@supabase/supabase-js": "^2.118.0",
     "@testing-library/dom": "^10.4.2",