@valbuild/shared 0.150.2 → 0.150.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @valbuild/shared
 
+## 0.150.3
+
+### Patch Changes
+
+- [#954](https://github.com/valbuild/val/pull/954) [`bc0cc43`](https://github.com/valbuild/val/commit/bc0cc433e157cca08f9ee384a4fb8be9bd3dad2c) Thanks [@freekh](https://github.com/freekh)! - Proposals in the Studio, reworked:
+
+  - **Save becomes Publish.** In a proposal, one split button stands where Publish is on the site. Its main half is the next step (Save, then Build, then Publish), and its caret offers every step, so you can publish straight away: Publish saves first. The separate Publish button beside the switcher is gone.
+  - **The switcher is where the proposal is managed**, as on a phone: its name and changes, Compare with the site, Rename, Copy link and Close, then where else to go.
+  - **Upgrade proposals** have one Publish (the bar's), say what they upgrade in the Publish dialog, cannot be published while Val Build is still working them out, are discarded rather than closed, and have their own icon.
+  - **A published proposal** shows a dialog with the ways out (the site, a new proposal, all proposals), since nothing more can be done in it.
+  - **Notices about where you are** (an upgrade, an upgrade under way, a restore) pop up from the bottom right and stay until dismissed; a dismissed one folds into the status bar and comes back from there.
+  - **No more flash of the site's chrome** at a proposal's address: the bar says "Loading…" until it knows, a return visit starts in the proposal at once, and opening a proposal says "Opening …" while the browser gets there.
+  - **After a save**, "Updating the preview…" and a failed render check are shown beside the switcher, and the status bar counts what is not saved to the proposal instead of saying "All changes saved".
+  - **Dialogs** dim the Studio instead of hiding it.
+  - **`theme.proposal`** in `s.settings()` sets the colour the Studio wears in a proposal (Val's violet when unset), under Settings → Studio. Like the accent, its shades are generated so text on them stays legible.
+
+- Updated dependencies [[`bc0cc43`](https://github.com/valbuild/val/commit/bc0cc433e157cca08f9ee384a4fb8be9bd3dad2c)]:
+  - @valbuild/core@0.150.3
+
 ## 0.150.2
 
 ### Patch Changes

package/dist/declarations/src/internal/theme/accentRamp.d.ts

@@ -71,7 +71,27 @@ export declare function themeCustomProperties(theme: {
     accent?: string | null;
     /** A `--radius` length. The caller maps the named step; see `THEME_RADIUS_LENGTHS`. */
     radius?: string | null;
+    /** The proposal colour, a hex. See {@link proposalCustomProperties}. */
+    proposal?: string | null;
 }): Record<string, string>;
+/**
+ * The proposal colour's tokens, for light and dark at once.
+ *
+ * The six `--*-proposal` tokens are declared per mode in `index.css`, each as
+ * `var(--theme-proposal-<mode>-<token>, <Val's violet>)`, so the ones written
+ * here are picked up where the mode block is declared -- on every element the
+ * Studio stamps `data-mode` on, which is where these go (see
+ * `themeCustomProperties` on why a `var()` resolves where it is declared).
+ * Both modes' values are written because an element does not know which mode
+ * its subtree will be in by the time it is styled.
+ *
+ * From the same ramp as the accent: the hue is the project's, the lightness
+ * of each step Val's, so the steps chosen here have the contrast Val's violet
+ * had. Text on the filled colour is white unless white would not read, then
+ * the ramp's darkest step. Empty for a value that is not a usable hex, so
+ * Val's violet stays.
+ */
+export declare function proposalCustomProperties(hex: string): Record<string, string>;
 /**
  * WCAG relative luminance of a six-digit hex.
  *

package/internal/dist/valbuild-shared-internal.cjs.dev.js

@@ -7530,7 +7530,7 @@ function accentRamp(accent) {
  * Empty when nothing is set, which is what makes "no theme" cost nothing.
  */
 function themeCustomProperties(theme) {
-  var properties = {};
+  var properties = createForOfIteratorHelper._objectSpread2({}, theme.proposal ? proposalCustomProperties(theme.proposal) : {});
   if (theme.accent) {
     var ramp = accentRamp(theme.accent);
     if (ramp !== null) {
@@ -7589,6 +7589,50 @@ function themeCustomProperties(theme) {
   return properties;
 }
 
+/**
+ * The proposal colour's tokens, for light and dark at once.
+ *
+ * The six `--*-proposal` tokens are declared per mode in `index.css`, each as
+ * `var(--theme-proposal-<mode>-<token>, <Val's violet>)`, so the ones written
+ * here are picked up where the mode block is declared -- on every element the
+ * Studio stamps `data-mode` on, which is where these go (see
+ * `themeCustomProperties` on why a `var()` resolves where it is declared).
+ * Both modes' values are written because an element does not know which mode
+ * its subtree will be in by the time it is styled.
+ *
+ * From the same ramp as the accent: the hue is the project's, the lightness
+ * of each step Val's, so the steps chosen here have the contrast Val's violet
+ * had. Text on the filled colour is white unless white would not read, then
+ * the ramp's darkest step. Empty for a value that is not a usable hex, so
+ * Val's violet stays.
+ */
+function proposalCustomProperties(hex) {
+  var ramp = accentRamp(hex);
+  if (ramp === null) return {};
+  var onFill = function onFill(fill) {
+    return contrastRatio("#ffffff", fill) >= 4.5 ? "#ffffff" : ramp[1000];
+  };
+  var soft = hexToRgb(ramp[500]);
+  var softDark = soft === null ? ramp[900] : "rgba(".concat(soft.map(function (c) {
+    return Math.round(c * 255);
+  }).join(", "), ", 0.16)");
+  return {
+    "--theme-proposal-light-bg": ramp[700],
+    "--theme-proposal-light-bg-hover": ramp[800],
+    "--theme-proposal-light-bg-soft": ramp[100],
+    "--theme-proposal-light-fg": ramp[700],
+    "--theme-proposal-light-fg-on": onFill(ramp[700]),
+    "--theme-proposal-light-border": ramp[400],
+    // 700 in dark too: 600 left white text below AA for some hues.
+    "--theme-proposal-dark-bg": ramp[700],
+    "--theme-proposal-dark-bg-hover": ramp[600],
+    "--theme-proposal-dark-bg-soft": softDark,
+    "--theme-proposal-dark-fg": ramp[300],
+    "--theme-proposal-dark-fg-on": onFill(ramp[700]),
+    "--theme-proposal-dark-border": ramp[700]
+  };
+}
+
 /**
  * WCAG relative luminance of a six-digit hex.
  *
@@ -8792,6 +8836,7 @@ exports.memoizePerRequest = memoizePerRequest;
 exports.newestCommitSha = newestCommitSha;
 exports.partitionValidationErrors = partitionValidationErrors;
 exports.performSearch = performSearch;
+exports.proposalCustomProperties = proposalCustomProperties;
 exports.relativeLuminance = relativeLuminance;
 exports.remirrorToRichTextSource = remirrorToRichTextSource;
 exports.removeModule = removeModule;

package/internal/dist/valbuild-shared-internal.cjs.prod.js

@@ -7530,7 +7530,7 @@ function accentRamp(accent) {
  * Empty when nothing is set, which is what makes "no theme" cost nothing.
  */
 function themeCustomProperties(theme) {
-  var properties = {};
+  var properties = createForOfIteratorHelper._objectSpread2({}, theme.proposal ? proposalCustomProperties(theme.proposal) : {});
   if (theme.accent) {
     var ramp = accentRamp(theme.accent);
     if (ramp !== null) {
@@ -7589,6 +7589,50 @@ function themeCustomProperties(theme) {
   return properties;
 }
 
+/**
+ * The proposal colour's tokens, for light and dark at once.
+ *
+ * The six `--*-proposal` tokens are declared per mode in `index.css`, each as
+ * `var(--theme-proposal-<mode>-<token>, <Val's violet>)`, so the ones written
+ * here are picked up where the mode block is declared -- on every element the
+ * Studio stamps `data-mode` on, which is where these go (see
+ * `themeCustomProperties` on why a `var()` resolves where it is declared).
+ * Both modes' values are written because an element does not know which mode
+ * its subtree will be in by the time it is styled.
+ *
+ * From the same ramp as the accent: the hue is the project's, the lightness
+ * of each step Val's, so the steps chosen here have the contrast Val's violet
+ * had. Text on the filled colour is white unless white would not read, then
+ * the ramp's darkest step. Empty for a value that is not a usable hex, so
+ * Val's violet stays.
+ */
+function proposalCustomProperties(hex) {
+  var ramp = accentRamp(hex);
+  if (ramp === null) return {};
+  var onFill = function onFill(fill) {
+    return contrastRatio("#ffffff", fill) >= 4.5 ? "#ffffff" : ramp[1000];
+  };
+  var soft = hexToRgb(ramp[500]);
+  var softDark = soft === null ? ramp[900] : "rgba(".concat(soft.map(function (c) {
+    return Math.round(c * 255);
+  }).join(", "), ", 0.16)");
+  return {
+    "--theme-proposal-light-bg": ramp[700],
+    "--theme-proposal-light-bg-hover": ramp[800],
+    "--theme-proposal-light-bg-soft": ramp[100],
+    "--theme-proposal-light-fg": ramp[700],
+    "--theme-proposal-light-fg-on": onFill(ramp[700]),
+    "--theme-proposal-light-border": ramp[400],
+    // 700 in dark too: 600 left white text below AA for some hues.
+    "--theme-proposal-dark-bg": ramp[700],
+    "--theme-proposal-dark-bg-hover": ramp[600],
+    "--theme-proposal-dark-bg-soft": softDark,
+    "--theme-proposal-dark-fg": ramp[300],
+    "--theme-proposal-dark-fg-on": onFill(ramp[700]),
+    "--theme-proposal-dark-border": ramp[700]
+  };
+}
+
 /**
  * WCAG relative luminance of a six-digit hex.
  *
@@ -8792,6 +8836,7 @@ exports.memoizePerRequest = memoizePerRequest;
 exports.newestCommitSha = newestCommitSha;
 exports.partitionValidationErrors = partitionValidationErrors;
 exports.performSearch = performSearch;
+exports.proposalCustomProperties = proposalCustomProperties;
 exports.relativeLuminance = relativeLuminance;
 exports.remirrorToRichTextSource = remirrorToRichTextSource;
 exports.removeModule = removeModule;

package/internal/dist/valbuild-shared-internal.esm.js

@@ -7523,7 +7523,7 @@ function accentRamp(accent) {
  * Empty when nothing is set, which is what makes "no theme" cost nothing.
  */
 function themeCustomProperties(theme) {
-  var properties = {};
+  var properties = _objectSpread2({}, theme.proposal ? proposalCustomProperties(theme.proposal) : {});
   if (theme.accent) {
     var ramp = accentRamp(theme.accent);
     if (ramp !== null) {
@@ -7582,6 +7582,50 @@ function themeCustomProperties(theme) {
   return properties;
 }
 
+/**
+ * The proposal colour's tokens, for light and dark at once.
+ *
+ * The six `--*-proposal` tokens are declared per mode in `index.css`, each as
+ * `var(--theme-proposal-<mode>-<token>, <Val's violet>)`, so the ones written
+ * here are picked up where the mode block is declared -- on every element the
+ * Studio stamps `data-mode` on, which is where these go (see
+ * `themeCustomProperties` on why a `var()` resolves where it is declared).
+ * Both modes' values are written because an element does not know which mode
+ * its subtree will be in by the time it is styled.
+ *
+ * From the same ramp as the accent: the hue is the project's, the lightness
+ * of each step Val's, so the steps chosen here have the contrast Val's violet
+ * had. Text on the filled colour is white unless white would not read, then
+ * the ramp's darkest step. Empty for a value that is not a usable hex, so
+ * Val's violet stays.
+ */
+function proposalCustomProperties(hex) {
+  var ramp = accentRamp(hex);
+  if (ramp === null) return {};
+  var onFill = function onFill(fill) {
+    return contrastRatio("#ffffff", fill) >= 4.5 ? "#ffffff" : ramp[1000];
+  };
+  var soft = hexToRgb(ramp[500]);
+  var softDark = soft === null ? ramp[900] : "rgba(".concat(soft.map(function (c) {
+    return Math.round(c * 255);
+  }).join(", "), ", 0.16)");
+  return {
+    "--theme-proposal-light-bg": ramp[700],
+    "--theme-proposal-light-bg-hover": ramp[800],
+    "--theme-proposal-light-bg-soft": ramp[100],
+    "--theme-proposal-light-fg": ramp[700],
+    "--theme-proposal-light-fg-on": onFill(ramp[700]),
+    "--theme-proposal-light-border": ramp[400],
+    // 700 in dark too: 600 left white text below AA for some hues.
+    "--theme-proposal-dark-bg": ramp[700],
+    "--theme-proposal-dark-bg-hover": ramp[600],
+    "--theme-proposal-dark-bg-soft": softDark,
+    "--theme-proposal-dark-fg": ramp[300],
+    "--theme-proposal-dark-fg-on": onFill(ramp[700]),
+    "--theme-proposal-dark-border": ramp[700]
+  };
+}
+
 /**
  * WCAG relative luminance of a six-digit hex.
  *
@@ -8608,4 +8652,4 @@ var messageOf = function messageOf(error) {
   return error instanceof Error ? error.message : String(error);
 };
 
-export { AA_LARGE, AA_TEXT, AnalyticsBeacon, Api, BRAND_CONTRAST_PAIRS, BinaryFileRef, CodeOptions, ColorOptions, DEFAULT_ERROR_MESSAGE, DateOptions, ENCODE_DEFAULTS, ENCODE_MIME_TYPE_OF, FileOptions, HistoricalCommit, HistoricalModule, HistoricalPatchSet, HistoryError, ImageEncodeOption, ImageOptions, JSONValue, JSON_ENTRIES_BATCH_MAX, LOCAL_FILE_IN_REMOTE_PROJECT_HINT, LOCAL_FILE_IN_REMOTE_PROJECT_WARNING, ModuleComparison, NEVER_ENCODED, ParentRef$1 as ParentRef, Patch, PatchBlock, PatchId, PatchJSON, PatchSets, PlanRefusalError, RAMP_STEPS, RemirrorBr, RemirrorBulletList, RemirrorHeading, RemirrorImage, RemirrorJSON, RemirrorLinkMark, RemirrorListItem, RemirrorOrderedList, RemirrorParagraph, RemirrorText, RemirrorTextMark, RestoreVerdict, RichTextOptions, SCHEMA_SOURCE_FIXES, SELF_CHECK_VERSION, STUDIO_FIXES, SerializedArraySchema, SerializedBooleanSchema, SerializedCodeSchema, SerializedColorSchema, SerializedDateSchema, SerializedDateTimeSchema, SerializedDiscriminatedUnionSchema, SerializedEnumSchema, SerializedFileSchema, SerializedImageSchema, SerializedKeyOfSchema, SerializedLiteralSchema, SerializedLocaleSchema, SerializedNumberSchema, SerializedObjectSchema, SerializedRecordSchema, SerializedRichTextSchema, SerializedRouteSchema, SerializedSchema, SerializedSettingsSchema, SerializedStringSchema, SerializedValViewSchema, SerializedVideoSchema, SharedValConfig, VAL_ENABLE_COOKIE_NAME, VAL_GREEN_RAMP, VAL_SESSION_COOKIE, VAL_STATE_COOKIE, VAL_STUDIO_HEADER, ValCommit, ValDeployment, VideoOptions, VideoStreamOption, WARNING_FIXES, WASM_ENCODED_MIME_TYPES, accentRamp, buildDuplicatePatch, buildEmptyAtPathPatch, buildFileRefValue, buildImageGalleryPatch, buildRemoveImageGalleryEntryPatch, buildSearchIndex, chainHeadOf, checkCompatibility, chooseEncoded, concatModulePath, contrastRatio, createRegExpFromPattern, createSearchIndex, createValClient, declaredLocales, describeContainerAtPath, emptyOf, enumLocaleTag, explainIncompatible, fallbackMimeType, filterBlockingValidationErrors, filterRoutesByPatterns, findSimilar, fitWithin, flattenRichText, forEachRichTextImage, getErrorMessageFromUnknownJson, getFilenameFromRef, getInlineImgInfo, getKeyOfRecordAt, getRefParts, getRoutesOf, getRoutesWithModulePaths, getSourceAt, getValDemo, indexModule, isInsidePatchSetPath, isLocaleSchema, isMimeTypeAccepted, isRemoteSchema, isRepairedOnSave, isSchemaSourceFixError, isSkippedSource, isStudioFix, isValidationWarning, isWarningFix, joinSharedChanges, keyOfRecordPath, levenshtein, localeAt, localeMeantBy, memoizePerRequest, newestCommitSha, partitionValidationErrors, performSearch, relativeLuminance, remirrorToRichTextSource, removeModule, resolveEncodeSettings, resolvePairGround, resolveSchemaSourceFixForError, resolveSchemaSourceFixes, resolveSerializedSchemaAtPath, richTextImageSchema, richTextToRemirror, safeParsePatch, schemaErrorsOf, schemaTypesOfPath, selectionClosure, selfCheck, shouldEncodeWithWasm, sideFiles, sideSource, sourcePathOfChild, themeCustomProperties, toolNames, traverseSchemaSource, urlOf, validateRoutePatterns, withExtension };
+export { AA_LARGE, AA_TEXT, AnalyticsBeacon, Api, BRAND_CONTRAST_PAIRS, BinaryFileRef, CodeOptions, ColorOptions, DEFAULT_ERROR_MESSAGE, DateOptions, ENCODE_DEFAULTS, ENCODE_MIME_TYPE_OF, FileOptions, HistoricalCommit, HistoricalModule, HistoricalPatchSet, HistoryError, ImageEncodeOption, ImageOptions, JSONValue, JSON_ENTRIES_BATCH_MAX, LOCAL_FILE_IN_REMOTE_PROJECT_HINT, LOCAL_FILE_IN_REMOTE_PROJECT_WARNING, ModuleComparison, NEVER_ENCODED, ParentRef$1 as ParentRef, Patch, PatchBlock, PatchId, PatchJSON, PatchSets, PlanRefusalError, RAMP_STEPS, RemirrorBr, RemirrorBulletList, RemirrorHeading, RemirrorImage, RemirrorJSON, RemirrorLinkMark, RemirrorListItem, RemirrorOrderedList, RemirrorParagraph, RemirrorText, RemirrorTextMark, RestoreVerdict, RichTextOptions, SCHEMA_SOURCE_FIXES, SELF_CHECK_VERSION, STUDIO_FIXES, SerializedArraySchema, SerializedBooleanSchema, SerializedCodeSchema, SerializedColorSchema, SerializedDateSchema, SerializedDateTimeSchema, SerializedDiscriminatedUnionSchema, SerializedEnumSchema, SerializedFileSchema, SerializedImageSchema, SerializedKeyOfSchema, SerializedLiteralSchema, SerializedLocaleSchema, SerializedNumberSchema, SerializedObjectSchema, SerializedRecordSchema, SerializedRichTextSchema, SerializedRouteSchema, SerializedSchema, SerializedSettingsSchema, SerializedStringSchema, SerializedValViewSchema, SerializedVideoSchema, SharedValConfig, VAL_ENABLE_COOKIE_NAME, VAL_GREEN_RAMP, VAL_SESSION_COOKIE, VAL_STATE_COOKIE, VAL_STUDIO_HEADER, ValCommit, ValDeployment, VideoOptions, VideoStreamOption, WARNING_FIXES, WASM_ENCODED_MIME_TYPES, accentRamp, buildDuplicatePatch, buildEmptyAtPathPatch, buildFileRefValue, buildImageGalleryPatch, buildRemoveImageGalleryEntryPatch, buildSearchIndex, chainHeadOf, checkCompatibility, chooseEncoded, concatModulePath, contrastRatio, createRegExpFromPattern, createSearchIndex, createValClient, declaredLocales, describeContainerAtPath, emptyOf, enumLocaleTag, explainIncompatible, fallbackMimeType, filterBlockingValidationErrors, filterRoutesByPatterns, findSimilar, fitWithin, flattenRichText, forEachRichTextImage, getErrorMessageFromUnknownJson, getFilenameFromRef, getInlineImgInfo, getKeyOfRecordAt, getRefParts, getRoutesOf, getRoutesWithModulePaths, getSourceAt, getValDemo, indexModule, isInsidePatchSetPath, isLocaleSchema, isMimeTypeAccepted, isRemoteSchema, isRepairedOnSave, isSchemaSourceFixError, isSkippedSource, isStudioFix, isValidationWarning, isWarningFix, joinSharedChanges, keyOfRecordPath, levenshtein, localeAt, localeMeantBy, memoizePerRequest, newestCommitSha, partitionValidationErrors, performSearch, proposalCustomProperties, relativeLuminance, remirrorToRichTextSource, removeModule, resolveEncodeSettings, resolvePairGround, resolveSchemaSourceFixForError, resolveSchemaSourceFixes, resolveSerializedSchemaAtPath, richTextImageSchema, richTextToRemirror, safeParsePatch, schemaErrorsOf, schemaTypesOfPath, selectionClosure, selfCheck, shouldEncodeWithWasm, sideFiles, sideSource, sourcePathOfChild, themeCustomProperties, toolNames, traverseSchemaSource, urlOf, validateRoutePatterns, withExtension };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/shared",
-  "version": "0.150.2",
+  "version": "0.150.3",
   "private": false,
   "description": "Val shared types and utilities",
   "repository": {
@@ -53,7 +53,7 @@
     "yaml": "^2.9.0",
     "zod": "^4.4.3",
     "zod-validation-error": "^5.0.0",
-    "@valbuild/core": "0.150.2"
+    "@valbuild/core": "0.150.3"
   },
   "files": [
     "CHANGELOG.md",