type-tester-tdf 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +196 -0
- package/dist/chunk-TSLTIRBT.js +541 -0
- package/dist/chunk-TSLTIRBT.js.map +1 -0
- package/dist/index.cjs +609 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +15 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +65 -0
- package/dist/index.js.map +1 -0
- package/dist/react.cjs +566 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +15 -0
- package/dist/react.d.ts +15 -0
- package/dist/react.js +26 -0
- package/dist/react.js.map +1 -0
- package/dist/styles.css +147 -0
- package/dist/typeTester-CtFcaLf7.d.cts +173 -0
- package/dist/typeTester-CtFcaLf7.d.ts +173 -0
- package/package.json +76 -0
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/** A four-character OpenType GSUB/GPOS feature tag. */
|
|
2
|
+
type FeatureTag = string;
|
|
3
|
+
/** Logical grouping used to organise features in a control UI. */
|
|
4
|
+
type FeatureGroup = "Ligatures" | "Letter Case" | "Figures" | "Fractions" | "Alternates" | "Position" | "Stylistic Sets";
|
|
5
|
+
/** Definition of a single OpenType feature exposed by the tester. */
|
|
6
|
+
interface FeatureDef {
|
|
7
|
+
/** The OpenType feature tag, e.g. "smcp". */
|
|
8
|
+
tag: FeatureTag;
|
|
9
|
+
/** Human-readable, unambiguous label. */
|
|
10
|
+
label: string;
|
|
11
|
+
/** Group the feature belongs to. */
|
|
12
|
+
group: FeatureGroup;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The default, ordered list of supported OpenType features. Labels are unique
|
|
16
|
+
* and follow the Microsoft OpenType feature registry naming.
|
|
17
|
+
*/
|
|
18
|
+
declare const FEATURES: readonly FeatureDef[];
|
|
19
|
+
/** Lookup map from tag to its definition. */
|
|
20
|
+
declare const FEATURE_BY_TAG: ReadonlyMap<FeatureTag, FeatureDef>;
|
|
21
|
+
/** Returns the label for a tag, falling back to the upper-cased tag itself. */
|
|
22
|
+
declare function featureLabel(tag: FeatureTag): string;
|
|
23
|
+
/** True if the tag is a known, supported OpenType feature. */
|
|
24
|
+
declare function isKnownFeature(tag: string): boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Builds a CSS `font-feature-settings` value from a set of active tags so that
|
|
27
|
+
* multiple features compose (e.g. small caps + oldstyle figures) instead of
|
|
28
|
+
* each selection overwriting the others. Returns "normal" when none are active.
|
|
29
|
+
*/
|
|
30
|
+
declare function featureSettings(active: Iterable<FeatureTag>): string;
|
|
31
|
+
|
|
32
|
+
/** Text alignment values supported by the tester. */
|
|
33
|
+
type Align = "left" | "center" | "right";
|
|
34
|
+
/** Size can be a fixed pixel value or "fit" to auto-fit the container width. */
|
|
35
|
+
type Size = number | "fit";
|
|
36
|
+
/** Numeric range with optional step, used to configure slider controls. */
|
|
37
|
+
interface Range {
|
|
38
|
+
/** Minimum value (inclusive). */
|
|
39
|
+
min: number;
|
|
40
|
+
/** Maximum value (inclusive). */
|
|
41
|
+
max: number;
|
|
42
|
+
/** Step granularity. Defaults are control-specific. */
|
|
43
|
+
step?: number;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Which interactive controls to render, and optional range overrides. A boolean
|
|
47
|
+
* toggles a control on/off with default ranges; an object enables it with a
|
|
48
|
+
* custom range.
|
|
49
|
+
*/
|
|
50
|
+
interface ControlsConfig {
|
|
51
|
+
/** Font-size slider (px). Default range 8–300. */
|
|
52
|
+
size?: boolean | Range;
|
|
53
|
+
/** Letter-spacing slider (em). Default range -0.1–0.5. */
|
|
54
|
+
tracking?: boolean | Range;
|
|
55
|
+
/** Font-weight slider. Default range 100–900 step 100 (or the variable axis). */
|
|
56
|
+
weight?: boolean | Range;
|
|
57
|
+
/** Italic toggle button. */
|
|
58
|
+
italic?: boolean;
|
|
59
|
+
/** Alignment control. */
|
|
60
|
+
align?: boolean;
|
|
61
|
+
/** Line-wrap toggle button. */
|
|
62
|
+
wrap?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* OpenType feature controls. `true` exposes the full default feature list;
|
|
65
|
+
* an array restricts the offered features to the given tags.
|
|
66
|
+
*/
|
|
67
|
+
features?: boolean | FeatureTag[];
|
|
68
|
+
}
|
|
69
|
+
/** Optional variable-font axis configuration. */
|
|
70
|
+
interface VariableConfig {
|
|
71
|
+
/** `wght` axis range; when set, weight is driven via font-variation-settings. */
|
|
72
|
+
wght?: Range;
|
|
73
|
+
}
|
|
74
|
+
/** Options accepted by {@link TypeTester}. All fields are optional. */
|
|
75
|
+
interface TypeTesterOptions {
|
|
76
|
+
/** Initial sample text. */
|
|
77
|
+
text?: string;
|
|
78
|
+
/** Primary font-family name to test. */
|
|
79
|
+
fontFamily?: string;
|
|
80
|
+
/** Fallback font stack appended after the tested family. */
|
|
81
|
+
fallback?: string;
|
|
82
|
+
/** Initial size in px, or "fit" for auto-fit. */
|
|
83
|
+
size?: Size;
|
|
84
|
+
/** Initial letter-spacing in em. */
|
|
85
|
+
tracking?: number;
|
|
86
|
+
/** Initial font weight. */
|
|
87
|
+
weight?: number;
|
|
88
|
+
/** Initial italic state. */
|
|
89
|
+
italic?: boolean;
|
|
90
|
+
/** Initial alignment. */
|
|
91
|
+
align?: Align;
|
|
92
|
+
/** Whether text wraps (multi-line) or stays on a single line. */
|
|
93
|
+
wrap?: boolean;
|
|
94
|
+
/** Initially active OpenType feature tags. */
|
|
95
|
+
features?: FeatureTag[];
|
|
96
|
+
/** Whether the sample text is user-editable. */
|
|
97
|
+
editable?: boolean;
|
|
98
|
+
/** Placeholder shown when the editable area is empty. */
|
|
99
|
+
placeholder?: string;
|
|
100
|
+
/** Which controls to render. Omit to show none (display-only). */
|
|
101
|
+
controls?: ControlsConfig;
|
|
102
|
+
/** Variable-font axis configuration. */
|
|
103
|
+
variable?: VariableConfig;
|
|
104
|
+
/** Accessible label for the editable region. */
|
|
105
|
+
ariaLabel?: string;
|
|
106
|
+
/** Called whenever the typographic state changes. */
|
|
107
|
+
onChange?: (state: TypeTesterState) => void;
|
|
108
|
+
}
|
|
109
|
+
/** The live typographic state of a tester instance. */
|
|
110
|
+
interface TypeTesterState {
|
|
111
|
+
/** Current text content. */
|
|
112
|
+
text: string;
|
|
113
|
+
/** Resolved size in px (the fitted size when in "fit" mode). */
|
|
114
|
+
size: number;
|
|
115
|
+
/** Whether the tester is auto-fitting. */
|
|
116
|
+
fit: boolean;
|
|
117
|
+
/** Letter-spacing in em. */
|
|
118
|
+
tracking: number;
|
|
119
|
+
/** Font weight. */
|
|
120
|
+
weight: number;
|
|
121
|
+
/** Italic state. */
|
|
122
|
+
italic: boolean;
|
|
123
|
+
/** Alignment. */
|
|
124
|
+
align: Align;
|
|
125
|
+
/** Whether text wraps. */
|
|
126
|
+
wrap: boolean;
|
|
127
|
+
/** Active OpenType feature tags. */
|
|
128
|
+
features: FeatureTag[];
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/** A type tester instance bound to a host element. */
|
|
132
|
+
declare class TypeTester {
|
|
133
|
+
private readonly host;
|
|
134
|
+
private readonly options;
|
|
135
|
+
private readonly controls;
|
|
136
|
+
private readonly state;
|
|
137
|
+
private readonly activeFeatures;
|
|
138
|
+
private readonly cleanups;
|
|
139
|
+
private typeEl;
|
|
140
|
+
private textEl;
|
|
141
|
+
private liveEl;
|
|
142
|
+
private sizeOutput;
|
|
143
|
+
private fitter;
|
|
144
|
+
/**
|
|
145
|
+
* @param host Element to render the tester into.
|
|
146
|
+
* @param options Configuration; all fields optional.
|
|
147
|
+
*/
|
|
148
|
+
constructor(host: HTMLElement, options?: TypeTesterOptions);
|
|
149
|
+
/** Returns a snapshot of the current state. */
|
|
150
|
+
getState(): TypeTesterState;
|
|
151
|
+
/** Removes all DOM, listeners and observers created by this instance. */
|
|
152
|
+
destroy(): void;
|
|
153
|
+
private render;
|
|
154
|
+
private buildControls;
|
|
155
|
+
private buildSlider;
|
|
156
|
+
private buildSize;
|
|
157
|
+
private buildTracking;
|
|
158
|
+
private buildWeight;
|
|
159
|
+
private buildToggle;
|
|
160
|
+
private buildItalic;
|
|
161
|
+
private buildWrap;
|
|
162
|
+
private buildAlign;
|
|
163
|
+
private buildFeatures;
|
|
164
|
+
private toggleFeature;
|
|
165
|
+
private wireEditable;
|
|
166
|
+
private setupFit;
|
|
167
|
+
/** Applies the full typographic state to the type element via element.style. */
|
|
168
|
+
private applyStyles;
|
|
169
|
+
private announce;
|
|
170
|
+
private emitChange;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
export { type Align as A, type ControlsConfig as C, FEATURES as F, type Range as R, type Size as S, TypeTester as T, type VariableConfig as V, FEATURE_BY_TAG as a, type FeatureDef as b, type FeatureGroup as c, type FeatureTag as d, type TypeTesterOptions as e, type TypeTesterState as f, featureLabel as g, featureSettings as h, isKnownFeature as i };
|
package/package.json
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "type-tester-tdf",
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "Accessible, dependency-free type tester for the web — a vanilla JS core with an optional React wrapper. Composable OpenType features, variable-font axes, and auto-fit sizing.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
},
|
|
15
|
+
"./react": {
|
|
16
|
+
"types": "./dist/react.d.ts",
|
|
17
|
+
"import": "./dist/react.js",
|
|
18
|
+
"require": "./dist/react.cjs"
|
|
19
|
+
},
|
|
20
|
+
"./styles.css": "./dist/styles.css"
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"sideEffects": [
|
|
26
|
+
"**/*.css"
|
|
27
|
+
],
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsup",
|
|
30
|
+
"dev": "tsup --watch",
|
|
31
|
+
"typecheck": "tsc --noEmit",
|
|
32
|
+
"test": "vitest run",
|
|
33
|
+
"test:watch": "vitest"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"typography",
|
|
37
|
+
"type-tester",
|
|
38
|
+
"font",
|
|
39
|
+
"opentype",
|
|
40
|
+
"variable-fonts",
|
|
41
|
+
"font-feature-settings",
|
|
42
|
+
"react",
|
|
43
|
+
"accessibility"
|
|
44
|
+
],
|
|
45
|
+
"author": "Quinn Keaveney",
|
|
46
|
+
"license": "ISC",
|
|
47
|
+
"repository": {
|
|
48
|
+
"type": "git",
|
|
49
|
+
"url": "git+https://github.com/quitequinn/TypeTester_TDF.git"
|
|
50
|
+
},
|
|
51
|
+
"homepage": "https://github.com/quitequinn/TypeTester_TDF#readme",
|
|
52
|
+
"bugs": {
|
|
53
|
+
"url": "https://github.com/quitequinn/TypeTester_TDF/issues"
|
|
54
|
+
},
|
|
55
|
+
"peerDependencies": {
|
|
56
|
+
"react": ">=17",
|
|
57
|
+
"react-dom": ">=17"
|
|
58
|
+
},
|
|
59
|
+
"peerDependenciesMeta": {
|
|
60
|
+
"react": {
|
|
61
|
+
"optional": true
|
|
62
|
+
},
|
|
63
|
+
"react-dom": {
|
|
64
|
+
"optional": true
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"devDependencies": {
|
|
68
|
+
"@types/react": "^18.3.0",
|
|
69
|
+
"jsdom": "^25.0.0",
|
|
70
|
+
"react": "^18.3.0",
|
|
71
|
+
"react-dom": "^18.3.0",
|
|
72
|
+
"tsup": "^8.3.0",
|
|
73
|
+
"typescript": "^5.6.0",
|
|
74
|
+
"vitest": "^2.1.0"
|
|
75
|
+
}
|
|
76
|
+
}
|