@breakside/jskit 2026.11.0 → 2026.27.0

package/Root/Frameworks/CSSOM/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.CSSOM
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/ChartKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ChartKit
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2021 Breakside Inc.
 # JSBundleEnvironments:

package/Root/Frameworks/ConferenceKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ConferenceKit
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/DBKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.DBKit
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/DOM/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.DOM
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/Dispatch/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.Dispatch
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:
   html: Dispatch+HTML.js

package/Root/Frameworks/FontKit/FNTOpenTypeFont.js

@@ -14,7 +14,7 @@
 // limitations under the License.
 
 // #import Foundation
-/* global FNTOpenTypeConstructor */
+/* global FNTOpenTypeConstructor, DataView */
 'use strict';
 
 (function(){
@@ -496,6 +496,10 @@ JSClass("FNTOpenTypeFont", JSObject, {
         return completion.promise;
     },
 
+    pathForGlyph: function(glyphIndex, transform){
+        return this.tables.glyf.pathForGlyph(glyphIndex, this.tables.loca, this.tables.head.indexToLocFormat, transform);
+    },
+
 });
 
 var tableChecksum = function(data){
@@ -1183,7 +1187,25 @@ JSClass("FNTOpenTypeFontTableCFF", FNTOpenTypeFontTable, {
 });
 
 JSClass("FNTOpenTypeFontTableGlyf", FNTOpenTypeFontTable, {
-    tag: 'glyf'
+    tag: 'glyf',
+
+    glyph: function(glyphIndex, loca, format){
+        var range = loca.rangeForGlyph(glyphIndex, format);
+        var data = this.data.subdataInRange(range);
+        var glyph = FNTOpenTypeGlyph.initWithData(data);
+        if (glyph.isKindOfClass(FNTOpenTypeCompoundGlyph)){
+            glyph.glyf = this;
+            glyph.loca = loca;
+            glyph.locaFormat = format;
+        }
+        return glyph;
+    },
+
+    pathForGlyph: function(glyphIndex, loca, format, transform){
+        var glyph = this.glyph(glyphIndex, loca, format);
+        return glyph.getPath(transform);
+    },
+
 });
 
 JSClass("FNTOpenTypeFontTableLoca", FNTOpenTypeFontTable, {
@@ -1790,10 +1812,14 @@ JSClass("FNTOpenTypeFontCmap13", FNTOpenTypeFontCmap, {
 JSClass("FNTOpenTypeGlyph", JSObject, {
 
     initWithData: function(data){
-        if (data.length >= 2 && data.dataView().getInt16(0) < 0){
-            return FNTOpenTypeCompoundGlyph.initWithData(data);
+        if (this.$class === FNTOpenTypeGlyph){
+            if (data.length >= 2 && data.dataView().getInt16(0) < 0){
+                return FNTOpenTypeCompoundGlyph.initWithData(data);
+            }
+            return FNTOpenTypeSimpleGlyph.initWithData(data);
         }
-        return FNTOpenTypeSimpleGlyph.initWithData(data);
+        this.data = data;
+        this.dataView = data.dataView();
     },
 
     data: null,
@@ -1802,27 +1828,184 @@ JSClass("FNTOpenTypeGlyph", JSObject, {
     xMin: DataBackedProperty(2, "int16"),
     yMin: DataBackedProperty(4, "int16"),
     xMax: DataBackedProperty(6, "int16"),
-    yMax: DataBackedProperty(8, "int16")
+    yMax: DataBackedProperty(8, "int16"),
+
+    getPath: function(){
+        return null;
+    },
 
 });
 
-JSClass("FNTOpenTypeSimpleGlyph", JSObject, {
+JSClass("FNTOpenTypeSimpleGlyph", FNTOpenTypeGlyph, {
 
-    initWithData: function(data){
-        this.data = data;
-        this.dataView = data.dataView();
-    },
+    numberOfCountours: DataBackedProperty(0, "int16"),
 
-    numberOfCountours: DataBackedProperty(0, "int16")
+    endPointIndexes: null,
+    flags: null,
+
+    points: JSLazyInitProperty(function(){
+        var points = [];
+        var offset = 10;
+        var end = this.data.length;
+        var i, l;
+        if (offset + this.numberOfCountours * 2 > end){
+            throw new Error("not enough data for glyph end point indexes");
+        }
+        this.endPointIndexes = [];
+        for (i = 0; i < this.numberOfCountours; ++i){
+            this.endPointIndexes.push(this.dataView.getUint16(offset));
+            offset += 2;
+        }
+        if (offset + 2 > end){
+            throw new Error("not enough data for glyph instructions");
+        }
+        var instructionLength = this.dataView.getUint16(offset);
+        offset += 2;
+        if (offset + instructionLength > end){
+            throw new Error("not enough data for glyph instructions");
+        }
+        offset += instructionLength;
+        var numberOfPoints = this.endPointIndexes[this.endPointIndexes.length - 1] + 1;
+        var repeatCount;
+        var j, k;
+        var flags;
+        i = 0;
+        this.flags = [];
+        while (i < numberOfPoints){
+            if (offset >= end){
+                return null;
+            }
+            flags = this.data[offset];
+            ++offset;
+            this.flags.push(flags);
+            ++i;
+            if ((flags & 0x08) !== 0){
+                if (offset >= end){
+                    return null;
+                }
+                repeatCount = this.data[offset];
+                ++offset;
+                for (j = 0; j < repeatCount; ++j){
+                    this.flags.push(flags);
+                    ++i;
+                }
+            }
+        }
+        i = 0;
+        var point = JSPoint.Zero;
+        var dx, dy;
+        while (i < numberOfPoints){
+            point = JSPoint(point);
+            flags = this.flags[i];
+            if ((flags & 0x02) === 0){
+                if ((flags & 0x10) === 0){
+                    if (offset + 2 > end){
+                        throw new Error("not enough data for x delta");
+                    }
+                    dx = this.dataView.getInt16(offset);
+                    offset += 2;
+                }else{
+                    dx = 0;
+                }
+            }else{
+                if (offset >= end){
+                    throw new Error("not enough data for x delta");
+                }
+                dx = this.data[offset];
+                ++offset;
+                if ((flags & 0x10) === 0){
+                    dx = -dx;
+                }
+            }
+            point.x += dx;
+            points.push(point);
+            ++i;
+        }
+        i = 0;
+        while (i < numberOfPoints){
+            points[i].y = point.y;
+            point = points[i];
+            flags = this.flags[i];
+            if ((flags & 0x04) === 0){
+                if ((flags & 0x20) === 0){
+                    if (offset + 2 > end){
+                        throw new Error("not enough data for y delta");
+                    }
+                    dy = this.dataView.getInt16(offset);
+                    offset += 2;
+                }else{
+                    dy = 0;
+                }
+            }else{
+                if (offset >= end){
+                    throw new Error("not enough data for y delta");
+                }
+                dy = this.data[offset];
+                ++offset;
+                if ((flags & 0x20) === 0){
+                    dy = -dy;
+                }
+            }
+            point.y += dy;
+            ++i;
+        }
+        return points;
+    }),
+
+    getPath: function(transform){
+        if (this.data.length < 2 || this.numberOfCountours === 0){
+            return JSPath.init();
+        }
+        var flags;
+        var point;
+        var i, j, k;
+        var p0;
+        var path = JSPath.init();
+        var cp = null;
+        j = 0;
+        var points = this.points;
+        for (i = 0; i < this.numberOfCountours; ++i){
+            flags = this.flags[j];
+            point = points[j];
+            p0 = point;
+            if ((flags & 0x01) === 0){
+                throw new Error("first point is off-curve");
+            }
+            path.moveToPoint(point, transform);
+            ++j;
+            for (k = this.endPointIndexes[i]; j <= k; ++j){
+                flags = this.flags[j];
+                point = points[j];
+                if ((flags & 0x01) === 0){
+                    if (cp !== null){
+                        path.addQuadraticCurveToPoint(cp.interpolation(point, 0.5), cp, transform);
+                    }
+                    cp = point;
+                }else{
+                    if (cp !== null){
+                        path.addQuadraticCurveToPoint(point, cp, transform);
+                    }else{
+                        path.addLineToPoint(point, transform);
+                    }
+                    cp = null;
+                }
+            }
+            if (cp !== null){
+                path.addQuadraticCurveToPoint(p0, cp, transform);
+                cp = null;
+            }
+            path.closeSubpath();
+        }
+        return path;
+    },
 
 });
 
-JSClass("FNTOpenTypeCompoundGlyph", JSObject, {
+JSClass("FNTOpenTypeCompoundGlyph", FNTOpenTypeGlyph, {
 
-    initWithData: function(data){
-        this.data = data;
-        this.dataView = data.dataView();
-    },
+    glyf: null,
+    loca: null,
+    locaFormat: null,
 
     updateReferencedGlyphs: function(glyphIndexByOriginalIndex, nextGlyphIndex){
         this.data = JSData.initWithCopyOfData(this.data);
@@ -1859,16 +2042,142 @@ JSClass("FNTOpenTypeCompoundGlyph", JSObject, {
             }
         }while ((flags & 0x20) == 0x20);
         return newGlyphs;
-    }
+    },
+
+    getPath: function(transform){
+        if (!transform){
+            transform = JSAffineTransform.Identity;
+        }
+        var points = [];
+        var path = JSPath.init();
+        var offset = 10;
+        var end = this.data.length;
+        var flags;
+        var glyphIndex;
+        var arg1;
+        var arg2;
+        var glyph;
+        var glyphTransform;
+        var glyphPath;
+        var hasMore = true;
+        var p1;
+        var p2;
+        while (hasMore && offset < end){
+            if (offset + 4 > end){
+                throw new Error("not enough data for compound glyph");
+            }
+            flags = this.dataView.getUint16(offset);
+            hasMore = (flags & 0x20) !== 0;
+            offset += 2;
+            glyphIndex = this.dataView.getUint16(offset);
+            offset += 2;
+            glyph = this.glyf.glyph(glyphIndex, this.loca, this.locaFormat);
+            glyphPath = glyph.getPath();
+            glyphTransform = JSAffineTransform.Identity;
+            points = points.concat(glyph.points);
+            if ((flags & 0x01) !== 0){
+                if (offset + 4 > end){
+                    throw new Error("not enough data for compound glyph args");
+                }
+                if ((flags & 0x02) !== 0){
+                    // x-y values
+                    arg1 = this.dataView.getInt16(offset);
+                    offset += 2;
+                    arg2 = this.dataView.getInt16(offset);
+                    offset += 2;
+                }else{
+                    // point indexes
+                    arg1 = this.dataView.getUint16(offset);
+                    offset += 2;
+                    arg2 = this.dataView.getUint16(offset);
+                    offset += 2;
+                }
+            }else{
+                if (offset + 2 > end){
+                    throw new Error("not enough data for compound glyph args");
+                }
+                if ((flags & 0x02) !== 0){
+                    // x-y values
+                    arg1 = this.dataView.getInt8(offset);
+                    ++offset;
+                    arg2 = this.dataView.getInt8(offset);
+                    ++offset;
+                }else{
+                    // point indexes
+                    arg1 = this.data[offset];
+                    ++offset;
+                    arg2 = this.data[offset];
+                    ++offset;
+                }
+            }
+            if ((flags & 0x08) !== 0){
+                if (offset + 2 > end){
+                    throw new Error("not enough data for compound glyph scale");
+                }
+                glyphTransform.a = this.dataView.getOTFFixedGlyphTranform(offset);
+                glyphTransform.d = glyphTransform.a;
+                offset += 2;
+            }
+            if ((flags & 0x40) !== 0){
+                if (offset + 4 > end){
+                    throw new Error("not enough data for compound glyph scales");
+                }
+                glyphTransform.a = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.d = this.dataView.getOTFFixedGlyphTranform(offset + 2);
+                offset += 2;
+            }
+            if ((flags & 0x80) !== 0){
+                if (offset + 8 > end){
+                    throw new Error("not enough data for compound glyph scale 2x2");
+                }
+                glyphTransform.a = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.b = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.c = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.d = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+            }
+
+            if ((flags & 0x02) !== 0){
+                // x-y values
+                glyphTransform = glyphTransform.translatedBy(arg1, arg2);
+            }else{
+                // point indexes
+                p1 = points[arg1];
+                p2 = glyph.points[arg2];
+                glyphTransform.tx = p1.x - p2.x;
+                glyphTransform.ty = p1.y - p2.y;
+            }
+            path.addPath(glyphPath, glyphTransform.concatenatedWith(transform));
+        }
+        return path;
+    },
 
 });
 
 Object.defineProperties(DataView.prototype, {
 
-    getOTFFixed: function(offset){
-        var whole = this.getUint16(offset);
-        var frac = this.getUint16(offset + 2);
-        return whole + frac / 0x10000;
+    getOTFFixed: {
+        value: function DataView_getOTFFixed(offset){
+            var whole = this.getUint16(offset);
+            var frac = this.getUint16(offset + 2);
+            return whole + frac / 0x10000;
+        }
+    },
+
+    getOTFFixedGlyphTranform: {
+        value: function DataView_getOTFFixedGlyphTransform(offset){
+            var n = this.getUint16(offset);
+            var whole = ((n & 0x4000) !== 0) ? 1 : 0;
+            if ((n & 0x8000) !== 0){
+                whole = -whole;
+            }
+            var frac = n & 0x3FFF;
+            return whole + frac / 0x4000;
+        }
     }
 
 });

package/Root/Frameworks/FontKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.FontKit
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/Foundation/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.Foundation
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.27.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/Foundation/JSAttributedString.js

@@ -65,6 +65,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.font:
                     return JSAttributedString.AttributeDecoder.font(value);
                 case JSAttributedString.Attribute.textColor:
+                case JSAttributedString.Attribute.strokeColor:
                 case JSAttributedString.Attribute.backgroundColor:
                     return JSAttributedString.AttributeDecoder.color(value);
                 case JSAttributedString.Attribute.link:
@@ -90,6 +91,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.headIndent:
                 case JSAttributedString.Attribute.tailIndent:
                 case JSAttributedString.Attribute.minimumLineHeight:
+                case JSAttributedString.Attribute.strokeWidth:
                     return JSAttributedString.AttributeDecoder.number(value);
                 case JSAttributedString.Attribute.textAlignment:
                     return JSAttributedString.AttributeDecoder.enumValue(JSTextAlignment)(value);
@@ -137,6 +139,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.font:
                     return JSAttributedString.AttributeEncoder.font(value);
                 case JSAttributedString.Attribute.textColor:
+                case JSAttributedString.Attribute.strokeColor:
                 case JSAttributedString.Attribute.backgroundColor:
                     return JSAttributedString.AttributeEncoder.color(value);
                 case JSAttributedString.Attribute.link:
@@ -162,6 +165,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.lineBreakMode:
                 case JSAttributedString.Attribute.maskCharacter:
                 case JSAttributedString.Attribute.paragraphStyleName:
+                case JSAttributedString.Attribute.strokeWidth:
                 default:
                     return value;
             }
@@ -391,6 +395,49 @@ JSClass("JSAttributedString", JSObject, {
         this._fixParagraphAttributesAtIndex(range.location + attributedString.string.length);
     },
 
+    stringWithFallbackFonts: function(fallbackFontDescriptors, defaultFont, usedDescriptors){
+        var attributedString = this;
+        var runIterator = attributedString.runIterator();
+        var unicodeIterator;
+        var end = attributedString.string.length;
+        var font;
+        var glyph;
+        var descriptor;
+        var i, l;
+        var descriptorFonts = [];
+        for (i = 0, l = fallbackFontDescriptors.length; i < l; ++i){
+            descriptorFonts.push({});
+        }
+        for (; runIterator.range.location < end; runIterator.increment()){
+            font = runIterator.attributes.font || defaultFont;
+            unicodeIterator = attributedString.string.unicodeIterator(0);
+            for (; unicodeIterator.character !== null; unicodeIterator.increment()){
+                glyph = font.glyphForCharacter(unicodeIterator.character);
+                if (glyph === 0){
+                    for (i = 0, l = fallbackFontDescriptors.length && glyph === 0; i < l; ++i){
+                        descriptor = fallbackFontDescriptors[i];
+                        glyph = descriptor.glyphForCharacter(unicodeIterator.character);
+                        if (glyph !== 0){
+                            if (usedDescriptors !== undefined){
+                                if (usedDescriptors.indexOf(descriptor) < 0){
+                                    usedDescriptors.push(descriptor);
+                                }
+                            }
+                            if (attributedString === this){
+                                attributedString = JSAttributedString.initWithAttributedString(attributedString);
+                            }
+                            if (descriptorFonts[i][font.pointSize] === undefined){
+                                descriptorFonts[i][font.pointSize] = JSFont.initWithDescriptor(descriptor, font.pointSize);
+                            }
+                            attributedString.addAttributeInRange("font", descriptorFonts[i][font.pointSize], JSRange(unicodeIterator.index, unicodeIterator.nextIndex - unicodeIterator.index));
+                        }
+                    }
+                }
+            }
+        }
+        return attributedString;
+    },
+
     // MARK: - Attribute mutations
 
     setAttributesInRange: function(attributes, range){
@@ -680,6 +727,7 @@ JSClass("JSAttributedString", JSObject, {
 JSAttributedString.Attribute = {
     font: "font",
     textColor: "textColor",
+    strokeColor: "strokeColor",
     backgroundColor: "backgroundColor",
     bold: "bold",
     italic: "italic",
@@ -689,6 +737,7 @@ JSAttributedString.Attribute = {
     maskCharacter: "maskCharacter",
     cursor: "cursor",
     link: "link",
+    strokeWidth: "strokeWidth",
 
     // Paragraph
     paragraphStyleName: "paragraphStyleName",
@@ -745,7 +794,13 @@ JSAttributedString.AttributeDecoder = {
     dataBase64URL: function(value){ return value.dataByDecodingBase64URL(); },
     dataHex: function(value){ return value.dataByDecodingHex(); },
     url: function(value){ return JSURL.initWithString(value); },
-    font: function(value){ return JSFont.initFromDictionary(value); },
+    font: function(value){
+        var font = JSFont.initFromDictionary(value);
+        if (font === null){
+            font = JSFont.initWithDescriptor(JSFontDescriptor.system, value.size);
+        }
+        return font;
+    },
     color: function(value){ return JSColor.initFromDictionary(value); },
     boolean: function(value){ return typeof(value) === "boolean" ? value : undefined; },
     number: function(value){ return typeof(value) === "number" ? value : undefined; },

package/Root/Frameworks/Foundation/JSContext.js

@@ -88,8 +88,7 @@ JSClass("JSContext", JSObject, {
 
     addQuadraticCurveToPoint: function(point, control){
         this.beginPathIfNeeded();
-        // FIXME: not exactly a quadradic
-        this.path.addCurveToPoint(point, control, point, this.state.transform);
+        this.path.addQuadraticCurveToPoint(point, control, this.state.transform);
     },
 
     addEllipseInRect: function(rect){
@@ -100,21 +99,17 @@ JSClass("JSContext", JSObject, {
     addPath: function(path){
         this.beginPathIfNeeded();
         var i, l;
-        var j, k;
-        var subpath;
-        var segment;
-        for (i = 0, l = path.subpaths.length; i < l; ++i){
-            subpath = path.subpaths[i];
-            this.moveToPoint(subpath.firstPoint.x, subpath.firstPoint.y);
-            for (j = 0, k = subpath.segments.length; j < k; ++j){
-                segment = subpath.segments[j];
-                if (segment.type === JSPath.SegmentType.line){
-                    this.addLineToPoint(segment.end.x, segment.end.y);
-                }else if (segment.type === JSPath.SegmentType.curve){
-                    this.addCurveToPoint(segment.curve.p2, segment.curve.cp1, segment.curve.cp2);
-                }
-            }
-            if (subpath.closed){
+        var elements = path.elements;
+        var element;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                this.moveToPoint(element.point.x, element.point.y);
+            }else if (element.type === JSPathElement.Type.line){
+                this.addLineToPoint(element.point.x, element.point.y);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                this.addCurveToPoint(element.curve.p2, element.curve.cp1, element.curve.cp2);
+            }else if (element.type === JSPathElement.Type.close){
                 this.closePath();
             }
         }
@@ -212,6 +207,12 @@ JSClass("JSContext", JSObject, {
     drawRadialGradient: function(gradient, rect){
     },
 
+    drawMaskedLinearGradient: function(gradient, rect, maskImage){
+    },
+
+    drawMaskedRadialGradient: function(gradient, rect, maskImage){
+    },
+
     drawLinearGradientStroke: function(gradient, path){
         // FIXME: gradient should be aligned to original path rect
         var strokePath = path.pathThatFillsStroke(this.state.lineWidth, this.state.lineCap, this.state.lineJoin, this.state.miterLimit);
@@ -282,6 +283,30 @@ JSClass("JSContext", JSObject, {
         this.state.shadowColor = color;
     },
 
+    // ----------------------------------------------------------------------
+    // MARK: - Transparency Layers
+
+    beginTransparencyLayer: function(){
+        this.save();
+        this.state.transparencyLayer = this.createTransparencyLayer();
+        this.setAlpha(1);
+        this.setShadow(JSPoint.Zero, 0, null);
+    },
+
+    endTransparencyLayer: function(){
+        if (this.state.transparencyLayer === null){
+            return;
+        }
+        this.drawTransparencyLayer(this.state.transparencyLayer);
+        this.restore();
+    },
+
+    createTransparencyLayer: function(){
+    },
+
+    drawTransparencyLayer: function(transparencyLayer){
+    },
+
     // ----------------------------------------------------------------------
     // MARK: - Clipping
 
@@ -411,6 +436,8 @@ JSContext.State = {
     characterSpacing: 0,
     textDrawingMode: JSContext.TextDrawingMode.fill,
 
+    transparencyLayer: null
+
 };
 
 })();