@trebco/treb 26.0.5 → 27.0.0

package/treb-base-types/src/theme.ts

@@ -19,8 +19,8 @@
  * 
  */
 
-import type { Style } from './style';
-import { Color } from './color';
+import type { Color, CellStyle } from './style';
+import { ColorFunctions } from './color';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -57,34 +57,34 @@ import { Color } from './color';
 export interface TableTheme {
 
   /** the first row in a table, showing column titles. */
-  header?: Style.Properties;
+  header?: CellStyle;
 
   /** 
    * odd rows in the table. we count the title row as zero, so
    * the first row in the table containing data is 1, hence odd.
    */
-  odd?: Style.Properties;
+  odd?: CellStyle;
 
   /**
    * even rows in the table.
    */
-  even?: Style.Properties;
+  even?: CellStyle;
 
   /**
    * styling for the totals row, if included. this will be the last 
    * row in the table. 
    */
-  total?: Style.Properties;
+  total?: CellStyle;
 }
 
 /** theme options - colors and fonts */
 export interface Theme {
 
   /** grid headers (composite) */
-  headers?: Style.Properties;
+  headers?: CellStyle;
 
   /** grid cell defaults (composite: size, font face, color, background) */
-  grid_cell?: Style.Properties;
+  grid_cell?: CellStyle;
 
   /** gridlines color */
   grid_color: string;
@@ -165,7 +165,7 @@ export const DefaultTheme: Theme = {
  * @deprecated
  * @internal
  */
-export const ThemeColor = (theme: Theme, color?: Style.Color): string => {
+export const ThemeColor = (theme: Theme, color?: Color): string => {
   return ThemeColor2(theme, color, 0);
 };
 
@@ -199,10 +199,10 @@ const TintedColor = (theme: Theme, index: number, tint: number) => {
     const rgb = (theme.theme_colors_rgb ? theme.theme_colors_rgb[index] : [0, 0, 0]) || [0, 0, 0];
     let tinted: {r: number, g: number, b: number};
     if (tint > 0) {
-      tinted = Color.Lighten(rgb[0], rgb[1], rgb[2], tint * 100, true);
+      tinted = ColorFunctions.Lighten(rgb[0], rgb[1], rgb[2], tint * 100, true);
     }
     else {
-      tinted = Color.Darken(rgb[0], rgb[1], rgb[2], -tint * 100, true);
+      tinted = ColorFunctions.Darken(rgb[0], rgb[1], rgb[2], -tint * 100, true);
     }
     color = `rgb(${tinted.r},${tinted.g},${tinted.b})`;
     theme.tint_cache[index][tint] = color;
@@ -222,7 +222,7 @@ const TintedColor = (theme: Theme, index: number, tint: number) => {
  * 
  * @internal
  */
-export const ThemeColor2 = (theme: Theme, color?: Style.Color, default_index?: number): string => {
+export const ThemeColor2 = (theme: Theme, color?: Color, default_index?: number): string => {
 
   if (color?.offset) {
 
@@ -245,7 +245,7 @@ export const ThemeColor2 = (theme: Theme, color?: Style.Color, default_index?: n
       // ok figure it out?
       const match = resolved.match(/rgb\((\d+), (\d+), (\d+)\)/);
       if (match) {
-        const hsl = Color.RGBToHSL(Number(match[1]), Number(match[2]), Number(match[3]));
+        const hsl = ColorFunctions.RGBToHSL(Number(match[1]), Number(match[2]), Number(match[3]));
         // console.info('resolved', resolved, {hsl});
         if (hsl.l > .65) {
           offset = theme.offset_dark;
@@ -373,11 +373,11 @@ const TableStyleFromCSS = (base: CSSStyleDeclaration, style: CSSStyleDeclaration
 */
 
 // testing
-const StyleFromCSS = (css: CSSStyleDeclaration): Style.Properties => {
+const StyleFromCSS = (css: CSSStyleDeclaration): CellStyle => {
 
   const { value, unit } = ParseFontSize(css.fontSize||'');
 
-  const style: Style.Properties = {
+  const style: CellStyle = {
     fill: { text: css.backgroundColor }, // || 'none',
     text: { text: css.color },
     font_size: {
@@ -428,11 +428,11 @@ const DeriveColorScheme = (theme: Theme, context: CanvasRenderingContext2D): 'li
 
   context.fillStyle = foreground_color?.text || '';
   context.fillRect(0, 0, 3, 3);
-  const fg = Color.RGBToHSL(...(Array.from(context.getImageData(1, 1, 1, 1).data) as [number, number, number]));
+  const fg = ColorFunctions.RGBToHSL(...(Array.from(context.getImageData(1, 1, 1, 1).data) as [number, number, number]));
 
   context.fillStyle = background_color?.text || '';
   context.fillRect(0, 0, 3, 3);
-  const bg = Color.RGBToHSL(...(Array.from(context.getImageData(1, 1, 1, 1).data) as [number, number, number]));
+  const bg = ColorFunctions.RGBToHSL(...(Array.from(context.getImageData(1, 1, 1, 1).data) as [number, number, number]));
 
   // console.info({fg, bg});
   
@@ -448,7 +448,7 @@ const DeriveColorScheme = (theme: Theme, context: CanvasRenderingContext2D): 'li
  */
 export const ThemeColorTable = (theme_color: number, tint = .7): TableTheme => {
 
-  const borders: Style.Properties = {
+  const borders: CellStyle = {
     border_top: 1,
     border_top_fill: { theme: theme_color },
     border_bottom: 1,

package/treb-base-types/src/value-type.ts

@@ -91,6 +91,9 @@ export const IsDimensionedQuantity = (value: unknown): value is DimensionedQuant
  * 
  * we'll switch to string types for import/export, although we still support
  * importing the old numeric enum types for backwards compatibility.
+ * 
+ * @internal
+ * 
  */
 export const ValueTypeList = [
   'undefined',
@@ -107,8 +110,24 @@ export const ValueTypeList = [
 
 /**
  * string types for import/export
+ * 
+ * @internalRemarks
+ * 
+ * temporarily switching to literal, see what happens to API
+ * 
  */
-export type SerializedValueType = typeof ValueTypeList[number];
+export type SerializedValueType = // typeof ValueTypeList[number];
+  'undefined' |
+  'formula' |
+  'string' |
+  'number' |
+  'boolean' |
+  'object' |
+  'error' |
+  'complex' |
+  'array' |
+  'dimensioned_quantity' ;
+
 
 /**
  * this enum goes back a long way and is pretty ingrained, so I don't 

package/treb-calculator/src/calculator.ts

@@ -20,7 +20,7 @@
  */
 
 import type { Cell, ICellAddress, ICellAddress2, UnionValue,
-         ArrayUnion, IArea, FlatCellData} from 'treb-base-types';
+         ArrayUnion, IArea, CellDataWithAddress} from 'treb-base-types';
 import { Localization, Area, ValueType, IsCellAddress} from 'treb-base-types';
          
 import type { ExpressionUnit, DependencyList, UnitRange, UnitAddress, UnitIdentifier } from 'treb-parser';
@@ -855,10 +855,10 @@ export class Calculator extends Graph {
    * so the leader does the calculation and then we broadcast calculated
    * values to followers.
    */
-  public ExportCalculatedValues(): Record<number, FlatCellData[]> {
+  public ExportCalculatedValues(): Record<number, CellDataWithAddress[]> {
     const data: any = {};
     for (const sheet of this.model.sheets.list) {
-      const calculated = sheet.cells.toJSON({calculated_value: true}).data as FlatCellData[];
+      const calculated = sheet.cells.toJSON({calculated_value: true}).data as CellDataWithAddress[];
       data[sheet.id] = calculated.filter(test => test.calculated !== undefined);
     }
     return data;
@@ -874,7 +874,7 @@ export class Calculator extends Graph {
    * note that we're checking for list mismatch in one direction but not the 
    * other direction. should probably check both.
    */
-  public ApplyCalculatedValues(data: Record<number, FlatCellData[]>): void {
+  public ApplyCalculatedValues(data: Record<number, CellDataWithAddress[]>): void {
     for (const sheet of this.model.sheets.list) {
       const cells = data[sheet.id];
       if (!cells) {

package/treb-calculator/src/functions/checkbox.ts

@@ -40,22 +40,22 @@ export const ClickCheckbox = (options: ClickFunctionOptions): ClickFunctionResul
   
     if (cell.style) {
       switch (cell.style.vertical_align) {
-        case Style.VerticalAlign.Top:
+        case 'top': // Style.VerticalAlign.Top:
           box.y = offset;
           break;
   
-        case Style.VerticalAlign.Middle:
+        case 'middle': // Style.VerticalAlign.Middle:
           box.y = Math.round((height - scaled) / 2);
           break;
     
       }
   
       switch (cell.style.horizontal_align) {
-        case Style.HorizontalAlign.Right:
+        case 'right': // Style.HorizontalAlign.Right:
           box.x = Math.round(width - offset - scaled);
           break;
   
-        case Style.HorizontalAlign.Center:
+        case 'center': // Style.HorizontalAlign.Center:
           box.x = Math.round((width - scaled) / 2);
           break;
   
@@ -87,11 +87,11 @@ export const RenderCheckbox = (options: RenderFunctionOptions): RenderFunctionRe
 
   if (cell.style) {
     switch (cell.style.vertical_align) {
-      case Style.VerticalAlign.Top:
+      case 'top': // Style.VerticalAlign.Top:
         y = offset;
         break;
 
-      case Style.VerticalAlign.Middle:
+      case 'middle': // Style.VerticalAlign.Middle:
         y = // Math.round
           ((height - scaled) / 2);
         break;
@@ -99,12 +99,12 @@ export const RenderCheckbox = (options: RenderFunctionOptions): RenderFunctionRe
     }
 
     switch (cell.style.horizontal_align) {
-      case Style.HorizontalAlign.Right:
+      case 'right': // Style.HorizontalAlign.Right:
         x = // Math.round
           (width - offset - scaled);
         break;
 
-      case Style.HorizontalAlign.Center:
+      case 'center': // Style.HorizontalAlign.Center:
         x = // Math.round
           ((width - scaled) / 2);
         break;

package/treb-calculator/src/functions/sparkline.ts

@@ -1,24 +1,24 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the 
- * terms of the GNU General Public License as published by the Free Software 
- * Foundation, either version 3 of the License, or (at your option) any 
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
- * details.
- *
- * You should have received a copy of the GNU General Public License along 
- * with TREB. If not, see <https://www.gnu.org/licenses/>. 
- *
- * Copyright 2022-2023 trebco, llc. 
- * info@treb.app
- * 
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
 /**
  * moved from sparkline module -- not sure why this needed a separate
  * module. although on reflection it might be better placed in the charts
@@ -30,7 +30,7 @@
  */
 
 
-import type { Cell, Style } from 'treb-base-types';
+import type { Cell, Style, CellStyle } from 'treb-base-types';
 
 export interface SparklineRenderOptions {
   context: CanvasRenderingContext2D;
@@ -104,7 +104,7 @@ export class Sparkline {
 
   }
 
-  protected static SparklineCommon(cell: Cell, style: Style.Properties): {
+  protected static SparklineCommon(cell: Cell, style: CellStyle): {
       values: Array<number|undefined>,
       colors: string[],
     } {
@@ -140,7 +140,7 @@ export class Sparkline {
       height: number,
       context: CanvasRenderingContext2D,
       cell: Cell,
-      style: Style.Properties,
+      style: CellStyle,
     ): void {
 
     const {values, colors} = this.SparklineCommon(cell, style);
@@ -220,7 +220,7 @@ export class Sparkline {
       height: number,
       context: CanvasRenderingContext2D,
       cell: Cell,
-      style: Style.Properties,
+      style: CellStyle,
     ): void {
 
     const {values, colors} = this.SparklineCommon(cell, style);

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -7,7 +7,7 @@ import html from '../../markup/layout.html';
 import toolbar_html from '../../markup/toolbar.html';
 
 import { NumberFormatCache } from 'treb-format';
-import { Style, Color } from 'treb-base-types';
+import { ColorFunctions, type Color } from 'treb-base-types';
 import { Measurement } from 'treb-utils';
 import type { ToolbarMessage } from '../toolbar-message';
 
@@ -68,7 +68,7 @@ export class SpreadsheetConstructor {
   public sheet?: EmbeddedSpreadsheet
 
   /** current border color. will be applied to new borders. */
-  protected border_color?: Style.Color;
+  protected border_color?: Color;
 
   /** color bar elements, since we update them frequently */
   protected color_bar_elements: Record<string, HTMLElement> = {};
@@ -662,25 +662,25 @@ export class SpreadsheetConstructor {
     }
 
     switch (state.style?.horizontal_align) {
-      case Style.HorizontalAlign.Left:
+      case 'left':
         Activate(this.toolbar_controls.left);
         break;  
-      case Style.HorizontalAlign.Center:
+      case 'center':
         Activate(this.toolbar_controls.center);
         break;
-      case Style.HorizontalAlign.Right:
+      case 'right':
         Activate(this.toolbar_controls.right);
         break;
     }
     
     switch (state.style?.vertical_align) {
-      case Style.VerticalAlign.Top:
+      case 'top':
         Activate(this.toolbar_controls.top);
         break;  
-      case Style.VerticalAlign.Middle:
+      case 'middle':
         Activate(this.toolbar_controls.middle);
         break;
-      case Style.VerticalAlign.Bottom:  
+      case 'bottom':  
         Activate(this.toolbar_controls.bottom);
         break;
     }
@@ -952,7 +952,7 @@ export class SpreadsheetConstructor {
 
       const props: {
         comment?: string;
-        color?: Style.Color;
+        color?: Color;
         format?: string;
         scale?: string;
       } = {
@@ -1108,7 +1108,7 @@ export class SpreadsheetConstructor {
       // this is a check for "did it resolve properly"
       const resolved = color_button.style.backgroundColor || '#fff';
       const bytes = Measurement.MeasureColor(resolved);
-      const hsl = Color.RGBToHSL(bytes[0], bytes[1], bytes[2]);
+      const hsl = ColorFunctions.RGBToHSL(bytes[0], bytes[1], bytes[2]);
 
       // light or dark based on background
       color_button.style.color = (hsl.l > .5) ? '#000' : '#fff';

package/treb-embed/src/embedded-spreadsheet.ts

@@ -51,8 +51,8 @@ import type {
 } from 'treb-base-types';
 
 import {
-  IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, 
-  Localization, Style, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, 
+  IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, type CellStyle,
+  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, 
 } from 'treb-base-types';
 
 import { EventSource, Yield, ValidateURI } from 'treb-utils';
@@ -200,7 +200,7 @@ export interface SheetScrollOptions {
 /**
  * function type used for filtering tables
  */
-export type TableFilterFunction = (value: CellValue, calculated_value: CellValue, style: Style.Properties) => boolean;
+export type TableFilterFunction = (value: CellValue, calculated_value: CellValue, style: CellStyle) => boolean;
 
 /**
  * embedded spreadsheet
@@ -253,7 +253,7 @@ export class EmbeddedSpreadsheet {
   public document_styles: {
     number_formats: string[], 
     colors: string[],
-    theme_colors: Array<{ color: Style.Color, resolved: string, }>[] // FIXME: type
+    theme_colors: Array<{ color: Color, resolved: string, }>[] // FIXME: type
   } = {
     number_formats: [], colors: [], theme_colors: [],
   };
@@ -1242,7 +1242,7 @@ export class EmbeddedSpreadsheet {
       return;
     }
 
-    let updated_style: Style.Properties = {};
+    let updated_style: CellStyle = {};
 
     const insert_annotation = (func: string) => {
       const selection = this.grid.GetSelection();
@@ -1341,7 +1341,7 @@ export class EmbeddedSpreadsheet {
         case 'fill-color':
 
           try {
-            const color: Style.Color = event.color || {};
+            const color: Color = event.color || {};
             if (event.command === 'text-color') {
               updated_style.text = color;
             }
@@ -1491,27 +1491,27 @@ export class EmbeddedSpreadsheet {
           break;
 
         case 'justify-left':
-          updated_style = { horizontal_align: Style.HorizontalAlign.Left };
+          updated_style = { horizontal_align: 'left' };
           break;
 
         case 'justify-center':
-          updated_style = { horizontal_align: Style.HorizontalAlign.Center };
+          updated_style = { horizontal_align: 'center' };
           break;
 
         case 'justify-right':
-          updated_style = { horizontal_align: Style.HorizontalAlign.Right };
+          updated_style = { horizontal_align: 'right' };
           break;
 
         case 'align-top':
-          updated_style = { vertical_align: Style.VerticalAlign.Top };
+          updated_style = { vertical_align: 'top' };
           break;
 
         case 'align-middle':
-          updated_style = { vertical_align: Style.VerticalAlign.Middle };
+          updated_style = { vertical_align: 'middle' };
           break;
 
         case 'align-bottom':
-          updated_style = { vertical_align: Style.VerticalAlign.Bottom };
+          updated_style = { vertical_align: 'bottom' };
           break;
 
         case 'reset':
@@ -3556,7 +3556,7 @@ export class EmbeddedSpreadsheet {
    * 
    * @public
    */
-  public ApplyStyle(range?: RangeReference, style: Style.Properties = {}, delta = true): void {
+  public ApplyStyle(range?: RangeReference, style: CellStyle = {}, delta = true): void {
 
     // ditto re: grid method taking undefined target
 
@@ -3776,7 +3776,7 @@ export class EmbeddedSpreadsheet {
    * @param apply_theme - include theme defaults when returning style
    * 
    */
-  public GetStyle(range?: RangeReference, apply_theme = false): Style.Properties|Style.Properties[][]|undefined {
+  public GetStyle(range?: RangeReference, apply_theme = false): CellStyle|CellStyle[][]|undefined {
 
     // API v1 OK
 
@@ -4968,7 +4968,7 @@ export class EmbeddedSpreadsheet {
     const tints = [.50, .25, 0, -.25, -.50];
     for (let i = 0; i < 10; i++) {
       this.document_styles.theme_colors.push(tints.map(tint => {
-        const color: Style.Color = { theme: i, tint };
+        const color: Color = { theme: i, tint };
         const resolved = ThemeColor2(this.grid.theme, color);
         return { color, resolved };
       }));

package/treb-embed/src/selection-state.ts

@@ -1,12 +1,12 @@
 
 import type { GridSelection } from 'treb-grid';
-import type { Style } from 'treb-base-types';
+import type { CellStyle } from 'treb-base-types';
 
 /**
  * state that should be reflected in toolbar buttons/selections
  */
 export interface SelectionState {
-  style?: Style.Properties;
+  style?: CellStyle;
   merge?: boolean;
   table?: boolean;
   frozen?: boolean;

package/treb-embed/src/toolbar-message.ts

@@ -1,5 +1,5 @@
 
-import type { Style } from 'treb-base-types';
+import type { Style, Color } from 'treb-base-types';
 
 /* 
  * this is an attempt to lock down toolbar commands, and better 
@@ -9,7 +9,7 @@ import type { Style } from 'treb-base-types';
 
 export interface SetColorToolbarMessage {
   command: 'fill-color'|'text-color'|'border-color';
-  color?: Style.Color
+  color?: Color
 }
 
 export interface CommentToolbarMessage {
@@ -19,7 +19,7 @@ export interface CommentToolbarMessage {
 
 export interface BorderToolbarMessage {
   command: 'border-top'|'border-bottom'|'border-left'|'border-right'|'border-all'|'border-outside'|'border-none'|'border-double-bottom';
-  color?: Style.Color;
+  color?: Color;
 }
 
 export interface AnnotationToolbarMessage {

package/treb-embed/src/types.ts

@@ -40,10 +40,10 @@ export enum SaveFileType {
 //
 
 /**
- * we're not exporting this type in the public API because there are so many 
- * nested types that aren't used anywhere else (in public functions). 
- * 
- * I would like to do it, though, that `any` looks bad in the  public API.
+ * this is the document type used by TREB. it has a lot of small variations 
+ * for historical reasons and backwards compatibility. usually it's preferable 
+ * to let TREB create and manage these documents rather than creating them
+ * manually.
  */
 export interface TREBDocument {
 

package/treb-embed/style/autocomplete.scss

@@ -27,7 +27,7 @@
    /* this is no longer attached to document, we can trim some of these */
   /* also a lot of this should move to theme */
 
-.treb-main {
+.treb-main.treb-main {
 
   .treb-autocomplete {
 

package/treb-embed/style/dialog.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-main {
+.treb-main.treb-main {
 
   --treb-icon-svg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='153.073px' height='133.742px' viewBox='0.673 4.629 153.073 133.742' enable-background='new 0.673 4.629 153.073 133.742' xml:space='preserve'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='0.6729' y1='71.5' x2='153.7461' y2='71.5'%3E%3Cstop offset='0' style='stop-color:%235CB5FF'/%3E%3Cstop offset='1' style='stop-color:%230059B9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M91.656,28.313c-4.989,0-17.266,6.249-21.305,8.504c-2.344-2.473-2.603-6.162-3.036-10.933 c-2.344,2.429-0.824,9.806,0,12.496c-10.238,7.635-18.83,15.531-27.597,24.471c-2.992-4.729-5.031-8.593-5.726-17.183 c-3.038,6.509,0.867,15.057,3.121,19.784c-9.674,12.193-19.263,25.297-27.03,37.834C-25.405,28.313,82.936-16.248,153.746,14.431 C109.879,43.63,98.554,135.784,21.498,111.274c-5.423,7.809-9.069,18.006-13.538,27.072c-3.73,0.263-6.334-1.646-7.288-3.12 c7.506-18.181,17.183-34.192,27.075-49.984c10.718,0.306,21.346,0.478,30.198-1.04c-7.681-2.038-16.877-0.78-26.032-3.123 c5.597-10.718,13.754-18.876,21.867-27.075c8.808,0.782,17.746,3.21,27.074,1.041c-8.111-1.431-15.966-1.952-22.909-4.165 C65.539,42.502,80.722,33.389,91.656,28.313z'/%3E%3C/svg%3E%0A");
   

package/treb-embed/style/dropdown-select.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-main {
+.treb-main.treb-main {
 
   .treb-dropdown-caret {
 

package/treb-embed/style/formula-bar.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-main {
+.treb-main.treb-main {
 
     .treb-formula-bar {
 

package/treb-embed/style/grid.scss

@@ -36,7 +36,7 @@
 @import 'tab-bar.scss';
 @import 'overlay-editor.scss';
 
-.treb-main {
+.treb-main.treb-main {
 
 
   /* 

package/treb-embed/style/layout.scss

@@ -8,7 +8,13 @@
 @import './treb-icons.scss';
 @import './toolbar.scss';
 
-.treb-main {
+/*
+ * switching to a double-selector to increase specificity. the particular
+ * issue we were running into was some general :where ... :is selectors that 
+ * were breaking into our styles. this is not optimal but it does prevent
+ * at least inadvertent overrides.
+ */
+.treb-main.treb-main {
 
   /*============================================================================
    *
@@ -58,7 +64,7 @@
 
   font-family: var(--treb-default-font, system-ui, $font-stack);
 
-  div, button, input, ul, ol, li, a, textarea {
+  div, button, input, ul, ol, li, a, textarea, svg {
 
     // maybe this is being too aggressive. we could be a little 
     // more specific about what we unset in order to avoid any 
@@ -71,6 +77,11 @@
 
   }
 
+  // addressing some specific problems... increased specificity
+
+  // &.treb-main svg { all: revert; }
+  // &.treb-main div { margin: revert; }
+
   /**
    * this is kind of a global property but we don't actually want
    * to inherit from the page, so we should set a font explicitly

package/treb-embed/style/mouse-mask.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-main {
+.treb-main.treb-main {
 
   /**
    * event mask for mouse drag. currently this is added _within_ node 

package/treb-embed/style/note.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-main {
+.treb-main.treb-main {
 
   // are these exactly the same? clearly we copied-and-pasted
   // at first. seems like we could consolidate.