@plitzi/sdk-style 0.36.2 → 0.37.1

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @plitzi/sdk-style
 
+## 0.37.1
+
+### Patch Changes
+
+- v0.37.1
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.37.1
+  - @plitzi/sdk-shared@0.37.1
+  - @plitzi/sdk-variables@0.37.1
+
+## 0.37.0
+
+### Minor Changes
+
+- - A `button` takes a `title`: shown as a tooltip, and its accessible name when it has no text of its own — an
+    icon-only button without one was announced as nothing. The builder's settings offer it as "Tooltip". The JSON export
+    is two files, `schema.json` and `style.json`, shown as tabs; each group of changes in the export folds away.
+
+  - `BindingTransformer.params` is `Record<string, string | number | boolean>`: a param the builder draws as a checkbox
+    (`styleVariant`'s `append`) is stored as the boolean it is and read as one, so the type now says so. The MCP compares
+    such a param with its catalog options as text. A `container` may be an `li`, for the rows of a list. The export
+    keeps every element id with `keepIds`, and the header's Publish dialog opens wider.
+
+  - **The builder exports the space on screen — on paid plans.** **Export** in the header opens a wide dialog: the
+    format as tabs (TypeScript in one file, TypeScript with a file per page as a `.zip`, or JSON), generated as soon as
+    it is picked, shown read-only in CodeMirror — beside a file list when there are several — with one row of actions,
+    **Copy** and **Download**. What the export tidied is a one-line note that unfolds into readable groups. On the free
+    plan the dialog explains what export is instead; the server refuses the code with a 402 (`limit: 'spaceExport'`)
+    whatever the builder shows. `useSpaceExport` is the one way into it, for anything else that needs the space as files.
+
+  - **A space document can be read back into code.** `specFromSpace(documents)` turns a `{ schema, style }` pair — a
+    builder export, a seed checked in as JSON — into the `SpaceSpec` that authors it, and `specToSource(spec, { exportName })`
+    writes that spec out as the TypeScript a person would write: one factory call per element, the attributes a type
+    already defaults to left out, the longhands the document stores written back as `padding: 10px 20px`, and every class
+    something names as a `styles()` declaration held in a variable. `split: true` writes one file per page and per layout.
+    `compareSpaces(expected, actual)` proves the round trip: it lists every way two pairs render differently — the tree,
+    the attributes, the rules that apply to each element whatever its selector is called, bindings, flows, pages, layouts
+    and settings — and nothing else. A selector used by one element becomes that element's own `css`; one shared, or
+    spelled out anywhere in the document (a `customCss` rule, a template), stays a class under its own name; an element id
+    nothing refers to is left out and derived again.
+
+    What an older builder left behind is repaired on the way, and every repair is reported in `corrections` rather than
+    made silently: element types that no longer exist (`navbar` → a `list` laid out in a row, `navbarItem` → `listItem`),
+    a hover stored as a class of its own (`card:hover`) folded into the class, fields and attributes no component reads,
+    a setting nothing reads, a link `target` of `_blank` (the component adds the underscore, so it rendered as `__blank`),
+    `null` or an empty list where an attribute is unset, a binding to a source nothing publishes, a flow with a step that
+    runs nothing, and a global callback registered on the wrong module. A CSS property the style editor cannot hold is
+    kept in `customCss` under the same selector, so the page still renders it.
+
+  - **What a spec can say grew to what a document holds.** A selector carries its states and variants beside its rules —
+    `styles('card', { css, states: { hover }, variants: { active } })`, and `states` on an element's own `css` — and the
+    selector cache is now written by `processSelector`, the function the style editor writes it with. An element type's
+    defaults (`elements`) take states, variants, per-breakpoint rules and `slots` for its other selectors (a modal's
+    `rootContainer`). A space declares `layouts` — shells that pages render inside, named by `layout: { id, slot }` on a
+    page or on another layout, with the slot checked to be inside the shell — and a page takes `keepState` and
+    `stateStorage`. `visible: false` starts an element hidden for a flow to reveal, and `loadStrategy` is carried through.
+    An element's own selector never takes the name of a declared class any more, however that class happens to be called.
+
+  - `elementAttributeNames` lists, as data, the attributes each built-in element can be authored with — `null` for one
+    that takes any. It is generated from the elements' attribute types (`yarn generate:attribute-names`) and a type test
+    fails when the two disagree. `defaultAttributes(type)` and `defaultLabel(type)` expose what a factory fills in.
+
+  - `CustomAttributes` accepts any attribute, because the component a custom element's `renderType` names reads its own
+    attributes off it; and `FormControlAttributes` declares `previewError`, which `withFieldValue` reads.
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.37.0
+  - @plitzi/sdk-shared@0.37.0
+  - @plitzi/sdk-variables@0.37.0
+
 ## 0.36.2
 
 ### Patch Changes

package/dist/StyleMap/StyleMap.d.ts

@@ -1,4 +1,4 @@
-import { DisplayMode, SpaceFont, Style, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
+import { DisplayMode, SpaceFont, Style, StyleCategory, StyleItem, StyleObject, StyleTarget, StyleValue, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
 export type StyleMapProps = {
     platform: Style['platform'];
     variables?: Style['variables'];
@@ -10,31 +10,15 @@ declare class StyleMap {
     fonts: SpaceFont[];
     constructor(props: StyleMapProps);
     static getInstance: (props: StyleMapProps) => StyleMap;
-    addSelector(displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: {
-        componentType?: string;
-        styleSelector?: string;
-        styleState?: StyleState;
-        styleVariant?: string;
-    }): boolean;
-    static addSelector(style: Pick<Style, 'platform' | 'variables'>, displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: {
-        componentType?: string;
-        styleSelector?: string;
-        styleState?: StyleState;
-        styleVariant?: string;
-    }): boolean;
+    addSelector(displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: StyleTarget): boolean;
+    static addSelector(style: Pick<Style, 'platform' | 'variables'>, displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: StyleTarget): boolean;
     getSelector: (displayMode: DisplayMode, selector: string) => StyleItem | undefined;
     static getSelector: (style: Pick<Style, "platform" | "variables">, displayMode: DisplayMode, selector: string) => StyleItem | undefined;
-    updateSelector(displayMode: DisplayMode, selector: string, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: {
-        componentType?: string;
+    updateSelector(displayMode: DisplayMode, selector: string, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: StyleTarget & {
         styleSelector: string;
-        styleState?: StyleState;
-        styleVariant?: string;
     }): boolean;
-    static updateSelector(style: Pick<Style, 'platform' | 'variables'>, displayMode: DisplayMode, selector: string, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: {
-        componentType?: string;
+    static updateSelector(style: Pick<Style, 'platform' | 'variables'>, displayMode: DisplayMode, selector: string, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: StyleTarget & {
         styleSelector: string;
-        styleState?: StyleState;
-        styleVariant?: string;
     }): boolean;
     removeSelector: (displayMode: DisplayMode | undefined, selector: string) => boolean;
     static removeSelector: (style: Pick<Style, "platform" | "variables">, displayMode: DisplayMode | undefined, selector: string) => boolean;

package/dist/StyleMap/helpers/isValueValid.d.ts

@@ -2,6 +2,7 @@ import { StyleAttributes, StyleBlock, StyleCategory, StyleObject, StyleState, St
 export declare const isStyleObject: (obj: Partial<StyleObject>) => boolean;
 export declare const isStyleStates: (obj: NonNullable<StyleBlock["states"]>) => boolean;
 export declare const isStyleVariants: (obj: NonNullable<StyleBlock["variants"]>) => boolean;
+export declare const isStyleAncestors: (obj: NonNullable<StyleBlock["ancestors"]>) => boolean;
 export declare const isStyleBlock: (obj: StyleBlock) => boolean;
 export declare const isStyleAttributes: (obj?: StyleAttributes) => boolean;
 declare const isValidValue: (path?: StyleCategory, value?: StyleAttributes | StyleValue | Partial<StyleObject> | StyleBlock | StyleVariants | StyleStates, params?: {

package/dist/StyleMap/helpers/isValueValid.mjs

@@ -1,7 +1,7 @@
 //#region src/StyleMap/helpers/isValueValid.ts
-var e = (e) => typeof e == "string" || typeof e == "number" || e === void 0, t = (e) => typeof e == "object" && !!e && !Array.isArray(e), n = (n) => t(n) && Object.values(n).every(e), r = (e) => t(e) && Object.values(e).every(n), i = (e) => t(e) && Object.values(e).every((e) => !(!t(e) || "variants" in e || "default" in e && e.default && !n(e.default) || "states" in e && e.states && !r(e.states))), a = (e) => !(!t(e) || !e.default || !n(e.default) || e.states && !r(e.states) || e.variants && !i(e.variants)), o = (e) => e === void 0 || t(e) && !Object.keys(e).length || t(e) && "base" in e && Object.values(e).every(a), s = (s, c, l) => {
+var e = (e) => typeof e == "string" || typeof e == "number" || e === void 0, t = (e) => typeof e == "object" && !!e && !Array.isArray(e), n = (n) => t(n) && Object.values(n).every(e), r = (e) => t(e) && Object.values(e).every(n), i = (e) => t(e) && Object.values(e).every((e) => !(!t(e) || "variants" in e || "ancestors" in e || "default" in e && e.default && !n(e.default) || "states" in e && e.states && !r(e.states))), a = (e) => t(e) && Object.values(e).every((e) => t(e) && (!e.default || n(e.default)) && (!e.states || r(e.states)) && (!e.variants || i(e.variants))), o = (e) => !(!t(e) || !e.default || !n(e.default) || e.states && !r(e.states) || e.variants && !i(e.variants) || e.ancestors && !a(e.ancestors)), s = (e) => e === void 0 || t(e) && !Object.keys(e).length || t(e) && "base" in e && Object.values(e).every(o), c = (a, c, l) => {
 	let { styleSelector: u, styleVariant: d, styleState: f } = l ?? {};
-	return !s && !u && !d && !f ? o(c) : !s && !u && d && f ? !1 : !s && !u && d ? i(c) : !s && !u && f ? r(c) : s ? e(c) : u ? c === void 0 ? !0 : e(c) || !t(c) ? !1 : n(c) || a(c) || a(c[u]) : !1;
+	return !a && !u && !d && !f ? s(c) : !a && !u && d && f ? !1 : !a && !u && d ? i(c) : !a && !u && f ? r(c) : a ? e(c) : u ? c === void 0 ? !0 : e(c) || !t(c) ? !1 : n(c) || o(c) || o(c[u]) : !1;
 };
 //#endregion
-export { s as default, o as isStyleAttributes, a as isStyleBlock, n as isStyleObject, r as isStyleStates, i as isStyleVariants };
+export { c as default, a as isStyleAncestors, s as isStyleAttributes, o as isStyleBlock, n as isStyleObject, r as isStyleStates, i as isStyleVariants };

package/dist/StyleMap/helpers/utils.d.ts

@@ -1,6 +1,6 @@
 import { StyleBlock, StyleCategory, StyleItem, StyleObject, StyleState, StyleStates, StyleValue, StyleVariants } from '@plitzi/sdk-shared';
 declare const parseValue: (path: StyleCategory | undefined, value: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock | undefined, prevValue: StyleObject) => StyleObject;
-declare const getTargetPath: (styleSelector: string, styleVariant?: string, styleState?: string) => string;
+declare const getTargetPath: (styleSelector: string, styleVariant?: string, styleState?: string, styleAncestor?: string) => string;
 declare const isEmptyObject: (v: unknown) => v is Record<string, unknown>;
-declare const writeStyle: (mode: "add" | "update" | undefined, styleItem: StyleItem, styleSelector: string, path?: StyleCategory, value?: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock, styleState?: StyleState, styleVariant?: string) => void;
+declare const writeStyle: (mode: "add" | "update" | undefined, styleItem: StyleItem, styleSelector: string, path?: StyleCategory, value?: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock, styleState?: StyleState, styleVariant?: string, styleAncestor?: string) => void;
 export { getTargetPath, isEmptyObject, parseValue, writeStyle };

package/dist/StyleMap/helpers/utils.mjs

@@ -12,46 +12,61 @@ var i = (t, n, r) => {
 		return e;
 	}
 	return r;
-}, a = (e, t, n) => t && n ? `attributes.${e}.variants.${t}.states.${n}` : t ? `attributes.${e}.variants.${t}.default` : n ? `attributes.${e}.states.${n}` : `attributes.${e}.default`, o = (e) => !!e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).length === 0, s = (s = "add", c, l, u, d, f, p) => {
-	let m = a(l, p, f), h = !!f || !!p;
-	if (d !== void 0) {
-		if (e(d) && o(d)) {
-			if (s === "update" && h) {
-				let e = p ? `attributes.${l}.variants` : `attributes.${l}.states`;
-				if (!t(c, e)) return;
+}, a = (e, t) => t ? `attributes.${e}.ancestors.${t}` : `attributes.${e}`, o = (e, t, n, r) => {
+	let i = a(e, r);
+	return t && n ? `${i}.variants.${t}.states.${n}` : t ? `${i}.variants.${t}.default` : n ? `${i}.states.${n}` : `${i}.default`;
+}, s = (e) => !!e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).length === 0, c = (e, i, a, o) => {
+	let l = t(e, i);
+	if (!l) return;
+	let u = n(l, [a]), d = i.includes(".ancestors.") && Object.values(u).every((e) => s(e));
+	if (Object.keys(u).length && !d || i === o) {
+		r(e, i, u);
+		return;
+	}
+	let f = i.lastIndexOf(".");
+	c(e, i.slice(0, f), i.slice(f + 1), o);
+}, l = (l = "add", u, d, f, p, m, h, g) => {
+	let _ = a(d, g), v = o(d, h, m, g), y = !!m || !!h, b = h ? `${_}.variants` : `${_}.states`;
+	if (p !== void 0) {
+		if (e(p) && s(p)) {
+			if (g && !y) {
+				c(u, _, "default", `attributes.${d}`);
+				return;
 			}
-			r(c, m, {});
+			if (l === "update" && y && !t(u, b)) return;
+			r(u, v, {});
 			return;
 		}
-		let n = t(c, m, {});
-		r(c, m, i(u, d, n));
+		let n = t(u, v, {});
+		r(u, v, i(f, p, n));
 		return;
 	}
-	if (s === "add" && !u && h) {
-		let e = p ? `attributes.${l}.variants` : `attributes.${l}.states`;
-		t(c, e) || r(c, m, {});
+	if (l === "add" && !f && y) {
+		t(u, b) || r(u, v, {});
 		return;
 	}
-	if (u) {
-		let e = t(c, m, {});
-		r(c, m, n(e, [u]));
+	if (f) {
+		let e = t(u, v, {});
+		r(u, v, n(e, [f]));
 		return;
 	}
-	if (p) {
-		let e = `attributes.${l}.variants`, i = t(c, e);
-		if (!i) return;
-		let a = n(i, [p]);
-		Object.keys(a).length ? r(c, e, a) : r(c, `attributes.${l}`, n(t(c, `attributes.${l}`), ["variants"]));
+	if (h && m) {
+		c(u, `${_}.variants.${h}.states`, m, `attributes.${d}`);
 		return;
 	}
-	if (f) {
-		let e = `attributes.${l}.states`, i = t(c, e);
-		if (!i) return;
-		let a = n(i, [f]);
-		Object.keys(a).length ? r(c, e, a) : r(c, `attributes.${l}`, n(t(c, `attributes.${l}`), ["states"]));
+	if (h) {
+		c(u, `${_}.variants`, h, `attributes.${d}`);
+		return;
+	}
+	if (m) {
+		c(u, `${_}.states`, m, `attributes.${d}`);
+		return;
+	}
+	if (g) {
+		c(u, `attributes.${d}.ancestors`, g, `attributes.${d}`);
 		return;
 	}
-	r(c, m, {});
+	r(u, v, {});
 };
 //#endregion
-export { a as getTargetPath, o as isEmptyObject, i as parseValue, s as writeStyle };
+export { o as getTargetPath, s as isEmptyObject, i as parseValue, l as writeStyle };

package/dist/StyleMap/methods/addSelector.d.ts

@@ -1,8 +1,3 @@
-import { DisplayMode, Style, StyleBlock, StyleCategory, StyleItem, StyleObject, StyleState, StyleStates, StyleValue, StyleVariants, TagType } from '@plitzi/sdk-shared';
-declare const addSelector: (platform: Style["platform"], displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock | undefined, params: {
-    componentType?: string;
-    styleSelector?: string;
-    styleState?: StyleState;
-    styleVariant?: string;
-}) => boolean;
+import { DisplayMode, Style, StyleBlock, StyleCategory, StyleItem, StyleObject, StyleStates, StyleTarget, StyleValue, StyleVariants, TagType } from '@plitzi/sdk-shared';
+declare const addSelector: (platform: Style["platform"], displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock | undefined, params: StyleTarget) => boolean;
 export default addSelector;

package/dist/StyleMap/methods/addSelector.mjs

@@ -6,9 +6,9 @@ import { set as a } from "@plitzi/plitzi-ui/helpers";
 //#region src/StyleMap/methods/addSelector.ts
 var o = (o, s, c, l, u, d, f) => {
 	if (!f) return !1;
-	let { componentType: p, styleSelector: m, styleState: h, styleVariant: g } = f;
-	if (t(o, s, c) || !p && l === "element" || p && l !== "element" || m && typeof m != "string" || !m && (h || g) || u && u.includes(".") || !n(u, d, f)) return !1;
-	let _ = {
+	let { componentType: p, styleSelector: m, styleState: h, styleVariant: g, styleAncestor: _ } = f;
+	if (t(o, s, c) || !p && l === "element" || p && l !== "element" || m && typeof m != "string" || !m && (h || g || _) || u && u.includes(".") || !n(u, d, f)) return !1;
+	let v = {
 		name: c,
 		type: l,
 		attributes: m ? {
@@ -18,7 +18,7 @@ var o = (o, s, c, l, u, d, f) => {
 		componentType: p,
 		cache: ""
 	};
-	return !m && r(d) ? ((!d || !Object.keys(d).length) && (d = { base: { default: {} } }), _.attributes = d, _.cache = e(_), a(o, `${s}.${c}`, _), !0) : (i("add", _, m ?? "base", u, d, h, g), _.cache = e(_), a(o, `${s}.${c}`, _), !0);
+	return !m && r(d) ? ((!d || !Object.keys(d).length) && (d = { base: { default: {} } }), v.attributes = d, v.cache = e(v), a(o, `${s}.${c}`, v), !0) : (i("add", v, m ?? "base", u, d, h, g, _), v.cache = e(v), a(o, `${s}.${c}`, v), !0);
 };
 //#endregion
 export { o as default };

package/dist/StyleMap/methods/updateSelector.d.ts

@@ -1,8 +1,5 @@
-import { DisplayMode, Style, StyleBlock, StyleCategory, StyleItem, StyleObject, StyleState, StyleStates, StyleValue, StyleVariants } from '@plitzi/sdk-shared';
-declare const updateSelector: (platform: Style["platform"], displayMode: DisplayMode, selector: string, path: StyleCategory | undefined, value: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock | undefined, params: {
-    componentType?: string;
+import { DisplayMode, Style, StyleBlock, StyleCategory, StyleItem, StyleObject, StyleStates, StyleTarget, StyleValue, StyleVariants } from '@plitzi/sdk-shared';
+declare const updateSelector: (platform: Style["platform"], displayMode: DisplayMode, selector: string, path: StyleCategory | undefined, value: StyleItem["attributes"] | StyleValue | Partial<StyleObject> | StyleVariants | StyleStates | StyleBlock | undefined, params: StyleTarget & {
     styleSelector: string;
-    styleState?: StyleState;
-    styleVariant?: string;
 }) => boolean;
 export default updateSelector;

package/dist/StyleMap/methods/updateSelector.mjs

@@ -6,8 +6,8 @@ import { set as i } from "@plitzi/plitzi-ui/helpers";
 //#region src/StyleMap/methods/updateSelector.ts
 var a = (a, o, s, c, l, u) => {
 	if (!u) return !1;
-	let { componentType: d, styleSelector: f, styleState: p, styleVariant: m } = u, h = t(a, o, s);
-	return !h || !f || !d && h.type === "element" || d && h.type !== "element" || f && typeof f != "string" || c && c.includes(".") || !n(c, l, u) ? !1 : (r("update", h, f, c, l, p, m), i(h, "cache", e(h)), i(a, `${o}.${s}`, h), !0);
+	let { componentType: d, styleSelector: f, styleState: p, styleVariant: m, styleAncestor: h } = u, g = t(a, o, s);
+	return !g || !f || !d && g.type === "element" || d && g.type !== "element" || f && typeof f != "string" || c && c.includes(".") || !n(c, l, u) ? !1 : (r("update", g, f, c, l, p, m, h), i(g, "cache", e(g)), i(a, `${o}.${s}`, g), !0);
 };
 //#endregion
 export { a as default };

package/dist/StyleReducer.d.ts

@@ -1,4 +1,4 @@
-import { DisplayMode, ReducerActionOrigin, Style, StyleCategory, StyleItem, StyleState, SpaceFont, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
+import { DisplayMode, ReducerActionOrigin, SpaceFont, Style, StyleCategory, StyleItem, StyleTarget, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
 export declare const StyleActions: {
     readonly STYLE_UPDATE: "STYLE_UPDATE";
     readonly STYLE_ADD_SELECTOR: "STYLE_ADD_SELECTOR";
@@ -28,23 +28,15 @@ export type StyleReducerActions = StyleReducerActionsBase & ({
     path?: StyleCategory;
     selectorType: TagType;
     value?: StyleItem['attributes'];
-    params: {
-        componentType?: string;
-        styleSelector?: string;
-        styleState?: StyleState;
-        styleVariant?: string;
-    };
+    params: StyleTarget;
 } | {
     type: 'STYLE_UPDATE_SELECTOR';
     displayMode: DisplayMode;
     selector: string;
     path?: StyleCategory;
     value?: StyleItem['attributes'];
-    params: {
-        componentType?: string;
+    params: StyleTarget & {
         styleSelector: string;
-        styleState?: StyleState;
-        styleVariant?: string;
     };
 } | {
     type: 'STYLE_REMOVE_SELECTOR';