narraleaf-react 0.36.0 → 0.37.0

package/dist/game/nlcore/common/elements.d.ts

@@ -29,4 +29,4 @@ export type { LayeredDefinition, LayerGroupDefinition, LayerResolver, LayerSlot,
 export type { SentenceMetadata } from "../elements/character/sentence";
 export type { TextEventAppearance, TextEventConfig, TextEventExpression, } from "../elements/character/textEvent";
 export type { CharacterPortraitConfig, DialogAvatar, DialogAvatarResolver, DialogAvatarResolverContext, DialogAvatarResolution, DialogAvatarSource, } from "../elements/character/avatar";
-export type { WordConfig, WordRenderProps, WordRenderer, } from "../elements/character/word";
+export type { WordConfig, WordEmphasis, WordRenderProps, WordRenderer, } from "../elements/character/word";

package/dist/game/nlcore/elements/character/word.d.ts

@@ -44,12 +44,50 @@ export type WordRenderProps<T = unknown> = {
  * cannot carry a function. An id that resolves to nothing renders as plain text.
  */
 export type WordRenderer<T = any> = string | React.ComponentType<WordRenderProps<T>>;
+/**
+ * Emphasis marks: a small glyph drawn beside every character of a word, the typographic way East
+ * Asian text stresses a phrase where a Latin one would go italic (傍点 / 圏点 in Japanese, 着重号 in
+ * Chinese). The marks follow the characters as they are typed out, so a word that is half revealed
+ * carries half its marks.
+ */
+export type WordEmphasis = {
+    /**
+     * The glyph drawn beside each character.
+     * @default "dot"
+     */
+    mark?: "dot" | "circle" | "sesame" | "triangle";
+    /**
+     * Whether that glyph is solid or hollow.
+     * @default "filled"
+     */
+    fill?: "filled" | "open";
+    /**
+     * Which side of the text the marks sit on. In horizontal writing `over` is above the line and
+     * `under` is below it; in vertical writing both sit to the right of the column, where the
+     * convention places them.
+     * @default "over"
+     */
+    position?: "over" | "under";
+};
 export type WordConfig = {
     className: string;
     ruby: string;
     color: Color;
     pause: boolean;
     cps?: number;
+    /**
+     * Emphasis marks drawn beside this word's characters. See {@link Word.emphasis}.
+     */
+    emphasis?: WordEmphasis;
+    /**
+     * This word's size as a share of the line's — `1.25` for a quarter larger, `0.8` for a fifth
+     * smaller. Relative rather than absolute, so the word keeps its weight against the rest of the
+     * line whatever size the line is set at, including while text scaling brings the line down to
+     * fit its box.
+     *
+     * Ignored when {@link WordConfig.fontSize} is set, which pins the word to an absolute size.
+     */
+    fontScale?: number;
     /**
      * Renders this word's revealed characters. See {@link Word.custom}.
      */
@@ -82,6 +120,20 @@ export declare class Word<T extends string | DynamicWord | Pausing | TextEvent =
      * @param text - The text or word to italicize.
      */
     static italic(text: string | Word): Word;
+    /**
+     * Return a word with emphasis marks beside its characters — the East Asian counterpart of
+     * italicising a phrase.
+     *
+     * @param text - The text or word to emphasise.
+     * @param emphasis - Which glyph to draw and which side of the text to draw it on. Defaults to a
+     * filled dot above the line, the Japanese convention; Chinese text sets `position: "under"`.
+     * @example
+     * ```ts
+     * character.say(["それは", Word.emphasis("わたし"), "が決めることです。"]);
+     * character.say(["这是", Word.emphasis("我", {position: "under"}), "的决定。"]);
+     * ```
+     */
+    static emphasis(text: string | Word, emphasis?: WordEmphasis): Word;
     /**
      * Render a word with a component of your own — an inline glossary term that opens a definition
      * popup, a name that links into an in-game encyclopedia, anything the dialogue box cannot say

package/dist/game/player/elements/say/wordStyle.d.ts

@@ -0,0 +1,23 @@
+import type React from "react";
+import type { WordConfig, WordEmphasis } from "../../../nlcore/elements/character/word";
+/**
+ * The size one word of a line is set at.
+ *
+ * A word sized in absolute units goes through the line's scale multiplier like every other length
+ * in the line. A word sized as a share of the line does not: `em` already resolves against the
+ * line's own size, which the multiplier has been applied to, so scaling it a second time would
+ * bring the word down twice for every step the line comes down.
+ */
+export declare function wordFontSize(config: Partial<WordConfig>, sentenceFontSize: React.CSSProperties["fontSize"]): React.CSSProperties["fontSize"];
+/**
+ * The same rule where no scaling is in play — the sample line a settings screen types out has no box
+ * to fit itself into.
+ */
+export declare function previewWordFontSize(config: Partial<WordConfig>, sentenceFontSize: React.CSSProperties["fontSize"]): React.CSSProperties["fontSize"];
+/**
+ * The emphasis marks a word carries, as the two declarations that draw them.
+ *
+ * The position keyword for vertical writing is always `right`: `over` and `under` are read only in
+ * horizontal writing, and both Japanese and Chinese set the marks on the right of a vertical column.
+ */
+export declare function emphasisStyle(emphasis: WordEmphasis | undefined): React.CSSProperties;